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

michael edmondson
michael edmondson
4,510 Points
Posted by michael edmondson
michael edmondson
4,510 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
4,510 Points
michael edmondson
michael edmondson
4,510 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
4,510 Points
michael edmondson
michael edmondson
4,510 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
4,510 Points
michael edmondson
michael edmondson
4,510 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
5,474 Points
Methee Saengow
Methee Saengow
5,474 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
229,732 Points
Steven Parker
Steven Parker
229,732 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.