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 trialMuaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 PointsVariable
Can someone please explain lines 21-23 whats happening on the right of the variable. Thanks!
1 Answer
Peter Vann
36,427 PointsYou mean this block of code, right?:
ul.addEventListener('change', (e) => {
const checkbox = event.target;
const checked = checkbox.checked;
const listItem = checkbox.parentnode.parentNode;
});
This code targets the various individual list items in the unordered list, specifically the one that is 'changed' (its checkbox was clicked and therefore it was toggled or 'changed'). The 'e' in this line of code:
ul.addEventListener('change', (e) => {
is the event object that is always available to the EventListener. One confusing thing is that the same variable (the event object) is referenced in two ways: as 'e' in the first line of code and as 'event' in the second line, but it's the same object (somehow javascript allows it - weird and a bit confusing - but the two ways to reference the object are interchangeable and the code still will work). Anyway, this line:
const checkbox = event.target;
stores the 'clicked' checkbox in the constant 'checkbox' this line:
const checked = checkbox.checked;
stores the current state of that checkbox (either true or false - as in checked or not)
this line:
const listItem = checkbox.parentnode.parentNode;
targets and stores the entire list item element (the parent of the parent of the checkbox that was changed) in the const listItem
The nutshell version is this code enables you to target and manipulate the specific current list item that the user has interacted with.
I hope that helps. Happy coding!
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsSwan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsI came here specifically to find an explanation for the whole 'e' and 'event' thing. I can't recall if it was explained in any lessons that the two are interchangeable. Thank you for clearing that up!!! Super helpful!!!