JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

michael edmondson
michael edmondson
2,590 Points

where am i going wrong with my code ?

The <ul> stored in the variable list has a click event listener that targets each <button> in the list. Complete the code to add a class of highlight to a <p> element that's an immediate previous sibling of the button being clicked.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
  p.previousElementSibling; p.className = "highlight";   
  }
});
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>
michael edmondson
michael edmondson
2,590 Points

this is what i have now is there anybody i can go to for tree house to better explain this task for me the prev video didnt say anything about setting a class name var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let prevbutton = button.previousElementSibling; let = e.target.parentNode.className = 'highlight'; } });

2 Answers

Steven Parker
Steven Parker
171,342 Points

You're close, but you can't get the sibling of "p" since it has not been defined.

You probably meant to assign p, giving it the sibling of the button (e.target).

michael edmondson
michael edmondson
2,590 Points

In what video do they actually go over this? i dont feel like im getting anywhere at this point var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let p = e.target.parentNode.className = 'highlight'; } });

Steven Parker
Steven Parker
171,342 Points

You nearly have it now, but the paragraph is not the parent node the button. The paragraph is the previous sibling of the button.

And this challenge draws on what was in the previous video Using nextElementSibling, but the situation is slightly different (including the use of previous instead of next sibling).

michael edmondson
michael edmondson
2,590 Points

I finally figured it out var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let p = e.target.previousSibling.className = 'highlight' } });

Thanks for your help

Methee Saengow
Methee Saengow
4,733 Points

I have also been getting stuck on this challange

Can anyone taking a look at my below javaScript code, it does not work.

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

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let prevNode = button.previousElementSibling; prevNode.className= 'hightlight'; } });

Steven Parker
Steven Parker
171,342 Points

In future, instead of adding a question as an "answer" to another question, always start a fresh one.

But here you are trying to get the previous sibling of "button", but no variable named "button" has been created.