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

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

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

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

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' 

Hi i tried this code "e.target.previousElementSibling.className ='highlight'" and it gave an error.

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.

Ok it did work. Thanks