sibling traversal

Question

A delegated click event listener has been attached to the selected ul element, which is stored in the variable list. The handler is targeting each button in the list. When any one of the buttons is clicked, a class of highlight should be added to the paragraph element immediately preceding that button inside the parent list item element. Add the code to create this behavior on line 5.

app.js

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

  }
});

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 · 2016-11-15T22:54:04Z

November 15, 2016 10:54pm

I know when it says when one of the buttons is clicked, a class of highlight should be add like this: if (e.target.className == 'highlight') {

} Then after that I get confused. Is the parent list the ul?

Welcome to the Treehouse Community

Looking to learn something new?

Juan Garcia

Juan Garcia

sibling traversal

Steven Parker

Steven Parker

It doesn't look like you've written any code yet.

Alexander Davison

Alexander Davison

1 Answer

Juan Garcia

Juan Garcia