Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nuno Nunes
Nuno Nunes
8,849 Points

update div based on checkboxes checked status

Dear all,

I'm having trouble to solve a problem that may be easy to most of you.

I've an html page with 2 divs. The first div has a form with 3 checkboxes and the second div should be populated with data based on the checked checkboxes.

What happens is that the information on the second div is not being updated when the checkboxes change. However, the correct information is displayed when I change the checked status by editing the html file.

To filter the data that must be shown, I'm using the _.filter() from the underscore.js library.

Here is my filter function:

var wodFilter = _.filter(WODs, function(tipo){

var filtroTime, filtroRounds;

for (var index in tipo.score){

var time = document.getElementById("time_checkbox").checked;

var rounds = document.getElementById("rounds_checkbox").checked;

if(time){
  filtroTime = tipo.score[index].includes("For Time");
}

if(rounds){
  filtroRounds = tipo.score[index].includes("AMRAP");
}

console.log(filtroTime);

return filtroTime || filtroRounds;

} });

Also, when I refresh the page, the checkboxes go the initial checked status.

Would you please help me solving these 2 issues?

1 - Not letting the checkboxes checed status change when the page is refreshed.

2 - Update the second div then the checkboxes change.

Thank you!

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I can give you some generic answers to your questions.

I would need to see your complete code (including the HTML/CSS) to observe your functionality and be more specific.

1 - Not letting the checkboxes checed status change when the page is refreshed.

The only way to do this is submit or postback any changes made to the page to the server, and have the server store the new state (in a database or session storage). Then the saved state data would be used when handling the refresh to make sure the page state is the same as when the last choice was made.

In the browser, all you can do is to intercept the refresh request and ask the user if they are sure they want to do it.

2 - Update the second div then the checkboxes change.

I assume you mean when the checkboxes change — and for that you need to establish event handlers on the boxes for 'onclick' or 'onchange' that will be called when a choice is made. Your handler function can then update the desired DOM element(s).

Nuno Nunes
Nuno Nunes
8,849 Points
Nuno Nunes
Nuno Nunes
8,849 Points

Hi Steven,

Thank you for your help. I'll look into it ;)