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

Phillip Lewis
Phillip Lewis
8,549 Points
Posted by Phillip Lewis
Phillip Lewis
8,549 Points

Dealing with sibling traversal and not sure if I am correct. Completely confused about this problem.

I am not sure how to deal with this problem

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let p = event.target.parentNode;
    let li = p.parentNode;
    let event.target.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>

1 Answer

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

:point_right: You want to add the class to the paragraph before the button.

Your code seems to be adding the class to the button itself, or it would if the argument was named "event" (it's actually named "e"). But you want to select the paragraph element which you know is immediately previous to the button itself. Since the provided code already filters out only events on buttons, you can condense the handler down to something like this.

    e.target.previousElementSibling.className = "highlight";

By starting with the button being pressed (e.target), we can just go directly to the previous sibling element and set the class.

Now FYI, your original code also had assignments for variables "p" and "li", again using the wrong name for the event object. But then they were never used, so those lines can simply be eliminated.