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

Question

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>

Answer 1 · 2019-11-21T02:15:52Z

November 21, 2019 2:15am

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!

Welcome to the Treehouse Community

Looking to learn something new?

Zachary Luke

Zachary Luke

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

1 Answer

Armin Kadic

Armin Kadic