JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Zachary Luke
Zachary Luke
Front End Web Development Techdegree Graduate 15,925 Points

I can't seem to set the class to "Highlight"... Scratching my head on what to change

I've watched the video on previousElementSibling and read the MDN file, but I'm just not getting what I'm doing incorrectly. Specifically, it says it cannot find the variable "p" in let pVar = p.previousElementSibling;, but I'm not sure what else the variable could be.

Any ideas?

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

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

Armin Kadic
Armin Kadic
12,893 Points

The challenge asks you to select the "previousElementSibling" of the button that is being clicked, and then change the targeted "className". You can do this by using e.target.previousElementSibling, so you should add this line

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

I hope you will understand it more clearly now, it does get confusing sometimes. I hope this helps, good luck!