Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Daljit Sohi
Daljit Sohi
5,604 Points
Posted by Daljit Sohi
Daljit Sohi
5,604 Points

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

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>

2 Answers

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

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.

Marcos Raj
PLUS
Marcos Raj
Courses Plus Student 5,979 Points
Marcos Raj
Marcos Raj
Courses Plus Student 5,979 Points

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";

  }
});