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 Adding and Removing Names RSVP Checkbox

Variable

Can someone please explain lines 21-23 whats happening on the right of the variable. Thanks!

1 Answer

You 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 Points

I 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!!!