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 DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Posted by Alta Angela
Alta Angela
5,993 Points

Which line here set the className of each li to 'responded' if their checkbox is checked?

filterCheckbox.addEventListener('change',(e)=>{ const isChecked = e.target.checked; const lis = ul.children; if (isChecked){ for (let x = 0; x<lis.length; x+=1) { let li = lis[x]; if (li.className === 'responded'){ li.style.display = ''; } else{ li.style.display = 'none';
}
} }else{ for (let x = 0; x<lis.length; x+=1) { let li = lis[x]; li.style.display = ''; } } });

It is working perfectly fine but I'm curious what made the className of checked items to 'responded'. or is it automatic that the className will be set to 'responded' once checked?

3 Answers

mryoung
mryoung
4,156 Points
mryoung
mryoung
4,156 Points

Is this all the Javascript used?

Alta Angela
Alta Angela
5,993 Points 
ul.addEventListener('change', (e) =>{
    console.log(e.target.checked);
    const checkbox = event.target;
    const checked = checkbox.checked;
    const listItem = checkbox.parentNode.parentNode;

        if(checked){
            listItem.className = 'responded';
                    }
            else{listItem.className = '';
                }

});

Yes mryoung , that's the same code as what Guil used in the video.

Alta Angela
Alta Angela
5,993 Points

I realized what line it is.. Thanks mryoung for trying to help me with this :)

Alta Angela
Alta Angela
5,993 Points
Alta Angela
Alta Angela
5,993 Points 
ul.addEventListener('change', (e) =>{
    console.log(e.target.checked);
    const checkbox = event.target;
    const checked = checkbox.checked;
    const listItem = checkbox.parentNode.parentNode;

        if(checked){
            listItem.className = 'responded'; //this sets the className to 'responded' if the checkbox is checked.
                    }
            else{listItem.className = '';
                }

});
mryoung
mryoung
4,156 Points
mryoung
mryoung
4,156 Points

What was the line?