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
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 PointsWhich previous sibling to consider?
Which element's previous sibling do i have to consider - the first item of <ul> is stored in variable 'list' - so should it be list.previousElementSibling.className = 'highlight'? or something else.
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
list.previousElementSibling.className == "highlight"
if (e.target.tagName == 'BUTTON') {
;
}
});
<!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>
4 Answers
Liam Clarke
19,938 PointsHello
You've got the right idea but your not targetting the correct element, Ill break down the question
The <ul> stored in the variable list has a click event listener that targets each <button> in the list.
This is what we start with, an event listener on the list.
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
}
});
...add a class of highlight to a <p> element that's an immediate previous sibling of the button being clicked Solution
So here we want to add a class of highlight to the previous element being pressed.
The code provided has the conditional check to see if the button has been pressed if (e.target.tagName == 'BUTTON')
Inside the block, we want to get the previous element, this can be done by taking the current target and chaining the previousElementSibling to it. e.target.previousElementSibling
Finally, we can then add a class to that element to highlight it. e.target.previousElementSibling.classList.add("highlight");
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
e.target.previousElementSibling.classList.add("highlight");
}
});
Hope this helps
Thayer Y
29,789 PointsHi,
"classList.add" this has not been covered in any previous lessons. i was under the impression that i could set a class name
ok you can do it with className like that
e.target.previousElementSibling.className ='highlight'
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 PointsHi i tried this code "e.target.previousElementSibling.className ='highlight'" and it gave an error.
Thayer Y
29,789 PointsHi,
Hi i tried this code "e.target.previousElementSibling.className ='highlight'" and it gave an error.
refresh your challenge page, and try it again it should work, I tried it and it works.
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 PointsOk it did work. Thanks
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 PointsShreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 PointsHi Liam i understood till e.target.previousElementSibling. Could you please explain "classList.add" this has not been covered in any previous lessons. i was under the impression that i could set a class name for an element with "className =". Thanks