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
Julianna Kahn
20,702 PointsMy understanding is that the paragraph would be the previousElementSibling to the button?
Am I defining p correctly?
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
let button = e.target.tagName;
let p = button.previousElementSibling;
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 have the right idea, and you're doing the right thing with "p".
But the button is not "e.target.tagName", but simply "e.target".
Jason Anders
Treehouse Moderator 145,860 PointsFor this one, I'm going to direct to a very well explained answer provided by Antony Pesantez in this older post.
Keep Coding! :)
Julianna Kahn
20,702 PointsThat is helpful, thank you.
Julianna Kahn
20,702 PointsThat makes a lot of sense, thank you.