A delegated click event listener has been attached to the selected ul element, which is stored in the variable list. The

Question

Get the error: 'One or more of the buttons do not affect their sibling paragraphs.' The code seems to work when i typed it in a code editor. Cannot figure out what the problem is here. Some help would be great!

Thanks!!!

app.js

const list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e){
    if(e.target.tagName == 'BUTTON'){

        let buttonParent = e.target.parentNode; //reference the button's parent
        // console.log(buttonParent);
        let prevLi = buttonParent.previousElementSibling; //get the -> previous element of the buttonParent
        // console.log(nextLi);
        if(prevLi){
            let para = prevLi.querySelector('p');
            // console.log(para);
            para.className = '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 · 2017-05-30T02:04:17Z

May 30, 2017 2:04am

this is a one-line solution that goes on line 5 as directed. you need to call the method on the recipient of the click event and add the class. you have everything you need you just need to consolidate it to one statement.

Answer 2 · 2017-06-18T21:26:28Z

June 18, 2017 9:26pm

This is working for me!

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

ListUL.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
      let li = e.target.parentNode;
      let para= li.querySelector('p');
      para.className ="highlight";

  }
});

Welcome to the Treehouse Community

Looking to learn something new?

Daljit Sohi

Daljit Sohi

A delegated click event listener has been attached to the selected ul element, which is stored in the variable list. The

2 Answers

james south

james south

Marcos Raj

Marcos Raj