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 Brown
Michael Brown
12,406 Points
Posted by Michael Brown
Michael Brown
12,406 Points

How to add class name to next sibling element?

Perhaps I'm not understanding this correctly, but I'm thinking the instructions are to add a class of "highlight" in the next paragraph element, relative to where the "button" element is clicked. Wouldn't this be correct in doing so and am I understanding the code challenge?

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = e.target.parentNode;
    let nextLi = e.target.nextSibling;

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

2 Answers

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

good job, Michael I did like this way, but a slightly different

 e.target.previousElementSibling.className = 'highlight' ;
Michael Brown
Michael Brown
12,406 Points
Michael Brown
Michael Brown
12,406 Points

I've figured it out. I kept reading this wrong and had my syntax incorrect. What was being asked was the add a class name to the previous list element paragraph to the button that is clicked.

let prevLi = e.target.previousSibling.className = "highlight";

P.S. For some reason the backticks aren't working for highlighting code