Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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!