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 JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Shreemangal Sethi
seal-mask
.a{fill-rule:evenodd;}techdegree
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 Points
Posted by Shreemangal Sethi
.a{fill-rule:evenodd;}techdegree
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 Points

Which 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.

app.js 
var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  list.previousElementSibling.className == "highlight"
  if (e.target.tagName == 'BUTTON') {
    ;
  }
});
index.html 
<!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
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hello

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

Shreemangal Sethi
seal-mask
.a{fill-rule:evenodd;}techdegree
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 Points
Shreemangal Sethi
.a{fill-rule:evenodd;}techdegree
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 Points

Hi 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

Thayer Y
Thayer Y
29,789 Points
Thayer Y
Thayer Y
29,789 Points

Hi,

"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'
Thayer Y
Thayer Y
29,789 Points
Thayer Y
Thayer Y
29,789 Points

Hi,

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.