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
Richard Preske
Courses Plus Student 4,356 PointsNot sure about this one.
I think I am adding too much code to this. The error states the button doesn't affect the paragraph siblings. It works for the first highlight only.
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
let button = document.querySelector('button');
let p = button.previousElementSibling;
p.className = "highlight";
if (event.target.className == "highlight") {
let li = event.target.parentNode;
let prevLI = p.previousElementSibling;
let ul = p.parentNode;
if (prevLI) {
ul.insertBefore(li, prevLI);
}
}
}
});
<!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>
6 Answers
Steven Parker
231,269 PointsYou're right about over-doing it, this challenge can be solved by adding just one line to the provided code (and nothing conditional). Just navigate from the button (which the code has already identified as "e.target") to the paragraph, and set the class name on it.
Richard Preske
Courses Plus Student 4,356 PointsThis is a hard one. Do you have a hint? Not sure how you can solve this with just one line of code. Don't give me the answer, just a hint, thanks.
Richard Preske
Courses Plus Student 4,356 PointsNot getting it I tried these so far, just guessing right now. I know you need the previousElementSibling and highlight class name added to the paragraph:
It wants me to set the variable p for the element <p>. p,target.className = highlight.previousElementSibling;
e.target.className = p.previousElementSibling;
Steven Parker
231,269 PointsAnother hint: what is being assigned (the right side of the operator) is simply "highlight". Everything else will be on the left side.
Richard Preske
Courses Plus Student 4,356 Pointsp.previousElementSibling.className = "highlight";
close??
Steven Parker
231,269 PointsNo "p" has been defined at that point in the code.
Richard Preske
Courses Plus Student 4,356 Pointse.previousElementSibling.className = "highlight";
This didn't work either.
Steven Parker
231,269 PointsThe button is "e.target", just "e" is an event object.
Richard Preske
Courses Plus Student 4,356 PointsGot it thanks! Makes sense now.