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
ghazikerkeni
7,873 Pointsthese tests challenges suck
A delegated click event listener has been attached to the selected ul element, which is stored in the variable list. The handler is targeting each button in the list. When any one of the buttons is clicked, a class of highlight should be added to the paragraph element immediately preceding that button inside the parent list item element. Add the code to create this behavior on line 5.
Ok I mean How am I gonna solve this? Why is it not asked in three steps like other teachers do? I've been repeating watching these videos about the DOM and I read MDN and still can't answer these questions!
I'm very disappointed with this method.
const list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
let p = event.target.parentNode;
p.className = "highlight";
}
});
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<section>
<h1>Making a Webpage Interactive</h1>
<p>Things to Learn</p>
<ul>
<li><p>Element Selection</p><button>Highlight</button></li>
<li><p>Events</p><button>Highlight</button></li>
<li><p>Event Listening</p><button>Highlight</button></li>
<li><p>DOM Traversal</p><button>Highlight</button></li>
</ul>
</section>
<script src="app.js"></script>
</body>
</html>
3 Answers
Steven Parker
231,271 PointsYou might be closer than you think.
You nearly have this solved! The only issue is that the paragraph is not the parent of the button element in the HTML hierarchy. It's actually the sibling that comes right before the button (they are both children of the list item). So instead of parentNode you could use previousElementSibling.
ghazikerkeni
7,873 PointsThank you so much for your hint I could solve it
jackie antreasian
7,310 Pointsme and my husband the web developer were just complaining about this one actually!
Steven Parker
231,271 PointsReally? What about this would seem like trouble to a seasoned developer?
Seth Roope
6,471 PointsSeth Roope
6,471 PointsI kind of struggled with this for a moment as well. When trying to visualize... how is a button nested within a paragraph a sibling to the paragraph and not a child?
Also Ghazi was trying to use
event.targetinstead of
e.targetSteven Parker
231,271 PointsSteven Parker
231,271 PointsLook carefully at the HTML — the button comes after the paragraph and is not nested inside it.
And event works because it's set to the event object by the browser. But it's not good practice to rely on it. It would certainly be much better to write:
let p = e.target.previousElementSibling;Seth Roope
6,471 PointsSeth Roope
6,471 PointsOh man, I can't believe I didn't see that. But that is good, I am no longer confused. And good to know on 'event' being an object, I didn't think of that. Thanks for your responses, you are always on point.