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

Noah Fields
Noah Fields
13,985 Points
Posted by Noah Fields
Noah Fields
13,985 Points

JavaScript - target text content of parent node

Currently I'm working on a personal assignment, that being to create a simple website for personal use to track my progress in books by page count. To do this, I'm creating a list with a number of elements (1000 currently), each appearing as a box with an increasing number and a checkbox. Currently, all of this works (though my box creation is rather rough). However, I also wrote a function in Javascript which should, in theory, change the text content of each list element from that number to "Selected", to later be changed to a different effect which is more helpful. However, despite my best efforts, this function doesn't work.

I expect I'll have to return to these forums a few times before I finish this website, despite its simplicity, but for now I'll just ask: How can I alter my code so that the parent element's text content is changed when the checkbox is set?

Snapshot is here: https://w.trhou.se/wausfx9l6i

All code is being written in Brackets. The preview doesn't quite work in Workspaces as a result, so I suggest either downloading it to view directly on your computer, or moving through the file tree until you reach main.html on Workspaces.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

All your issues seem to be on line 30:

document.querySelectorAll('.check_box').addEventListener('checked', enlarge(event.target));
  • a collection of elements doesn't itself have an "addEventListener" method
  • you'd need a loop to set individual listeners on the elements
  • "checked" is not an event name (did you mean "click"?)
  • you don't want to invoke the callback, just name it

This line would resolve those issues:

document.querySelectorAll('.check_box').forEach(b => b.addEventListener('click', enlarge));

You'll still need to deal with the fact that writing textContent destroys all children of the element.

Noah Fields
Noah Fields
13,985 Points
Noah Fields
Noah Fields
13,985 Points

The event "checked" was an attempt, though clearly a mistaken one, to refer to an event wherein a check box is activated (the check mark is in it) as opposed to deactivated (blank square). The "click" event should work fine - I actually tried it with that before but the other issues you pointed out caused it to fail, so I tried to change the event type to see if that was the problem. Thanks for your help!

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Another idea would be to create a delegated handler which would allow you to manage all the checkboxes with one single handler (no looping!). And by testing the "checked" property, you could only respond to boxes being activated.

And you could easily add an "else" block if you wanted to do something else when the box is deactivated.

// designated handler goes on the parent but responds to the children
document.querySelector("ul").addEventListener("change", e => {
  if (e.target.checked) enlarge(e);
});