I'm confused with this exercise I cant do it

Question

The excersi tells me this:

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.

the problem is to solve all that in just one line

app.js

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

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

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 · 2018-10-17T09:41:11Z

October 17, 2018 9:41am

Hi Ulises

In order to do this, you need to use the previousElementSibling property.

As you can see in the "index.html" file the list element is the parent with 2 siblings inside, the first one being the p element and the second one being the button element.

we want to add a class to the p element (the previous sibling) whenever a button is clicked

Solution

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    // target the previous element siblings class and add the word "highlight"
    e.target.previousElementSibling.className = "highlight";
  }
});

Welcome to the Treehouse Community

Looking to learn something new?

Ulises Guareschi

Ulises Guareschi

I'm confused with this exercise I cant do it

1 Answer

Liam Clarke

Liam Clarke

Ulises Guareschi

Ulises Guareschi