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

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