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 Basic and Conditional Line Breakpoints

Why did the first 3 LI all work as expected even though the condition was wrong for them?

The video is checking the condition if (li.className = 'responded')......the first 3 LI worked as expected even thought the condition was wrong. The condition should've been if (li.className === 'responded') so my question is why did the first 3 LI;s work as expected, but the 4th one didn't, considering they all checked the condition first?

2 Answers

Hi Dale

It works because in this video Joel is not talking about how they change when the checkbox is ticked, he is showing how to display none when the "Hide those who haven't responded" is checked.

So on line 67 to 77 of the app.js file, this is what is controlling the checked and unchecked states on change. As well as the starting index.html file starts with some inputs checked with ( checked="true" ) and class names "responded", which you are referring to.

When you click on the "Hide those who haven't responded" checkbox, it does not work, they all receive a class of "responded" because of the if statement which is not checking equality ( ===) it's trying to assign ( = ).

So when you correct the if statement like so:

        if (li.className === 'responded') {
          li.style.display = '';
        } else {
          li.style.display = 'none';

and click on the "Hide those who haven't responded" checkbox, you will see that it now hides the unchecked boxes.

Does this make sense?

And as mentioned in the teacher's comments, it is considered good practice to use the type-safe equality operators ( === and !==), use these at all times to ensure you are getting accurate results.

Good Luck

Thank you for the explanation. It is helpful!