Answer?

Question

?

app.js

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

list.addEventListener('click', function(event) {
  if (event.target.tagName == 'BUTTON') {
    let p = event.target.previousELementSibling;
    let button = p.parentNode;

  }
});

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-12-26T15:39:29Z

December 26, 2019 3:39pm

You're getting close, but:

you should not modify the provided code (leave the parameter name as "e")
the property "previousELementSibling" should be spelled "previousElementSibling" (with lower-case "l")
you won't need to assign "button" or reference the parent node (the button isn't the parent anyway)
you still need to set the class name on the paragraph to "highlight"

Welcome to the Treehouse Community

Looking to learn something new?

Ben Han

Ben Han

Answer?

1 Answer

Steven Parker

Steven Parker