Highlight

Question

I'm trying to add a highlight, but cannot figure out how to add that particular tag. Mostly, it appears that the challenge is missing access to some information, such as WTF the class for highlight is, since I am assuming it is buried in the stylesheet.

app.js

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    list.previousElementSibling.style.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-03-13T22:10:30Z

March 13, 2019 10:10pm

Some hints:

The class you are to add for highlight is 'highlight'
You can add a class with the following syntax: element.classList.add("myclass")
You are to add the class to the previous element sibling of the button - not the list

Welcome to the Treehouse Community

Looking to learn something new?

Mike Berkow

Mike Berkow

Highlight

1 Answer

KRIS NIKOLAISEN

KRIS NIKOLAISEN