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 DOM Scripting By Example Adding and Removing Names RSVP Checkbox

Jeff T
seal-mask
.a{fill-rule:evenodd;}techdegree
Jeff T
Full Stack JavaScript Techdegree Student 9,532 Points

What's the difference here?

// What's the difference between doing this(as in the video)

ul.addEventListener('change', (e) => {
const checkbox = event.target;
const checked = checkbox.checked;
const listItem = checkbox.parentNode.parentNode;

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

//and this

ul.addEventListener('change', (e) => {
  const li = e.target.parentNode.parentNode;
  li.className = e.target.checked ? 'responded' : '';
});

Is my solution slower or harder to understand?

1 Answer

Steven Parker
Steven Parker
220,450 Points

Your solution looks fine. The video example probably avoids constructs like ternary expressions which are not introduced in the same course to focus specifically on the concepts being introduced in this lesson.

The more courses you take, the more often you'll notice ways to make examples more compact by combining things you've learned, since the instructor needs to show each concept without knowing which other courses have already been taken.