Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

How to append class names to sibling elements

Really stuck on this one... Even the way the question is worded really confuses me. Not sure how to a) add a new class, or b) select an immediate previous sibling.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    append.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>

3 Answers

Steven Parker
Steven Parker
208,479 Points

Assigning the name "highlight" to the className attribute of an element is a valid way to add the class name, but there's no element named "append" defined here.

Elements have an attribute called "previousElementSibling" that can be useful here for DOM traversal.

Steven Parker
Steven Parker
208,479 Points

Your second try is close, but the paragraph that you want to give the new class to is not a sibling of the list. It's a sibling of the button that was just pressed, and the tag name test just determined that the button is "e.target".

So what I tried to do was select the previous sibling element under a new variable, and then apply it to that variable. This also failed:

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

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

Am I heading in the right direction or am I making it unnecessarily complicated?

Sean T. Unwin
Sean T. Unwin
28,656 Points
  1. You are being asked to select the previous element of the button that was clicked.
  2. To attach a CSS class to an element via code we use the classList property which has a method called, add()

We use e.target to get the button then .previousElementSibling then append the classList.add() with the class name as the parameter for the add() function.