JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Christopher Evans
Christopher Evans
9,776 Points

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
195,812 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
195,812 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".

Christopher Evans
Christopher Evans
9,776 Points

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
MOD
Sean T. Unwin
Treehouse Moderator 28,648 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.