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

yousif alyousif
yousif alyousif
2,322 Points
Posted by yousif alyousif
yousif alyousif
2,322 Points

can any one please help me solve this challenge?

I think I am having 2 problems one of them is that I could not understand the instruction clearly the second problem is that I could not come up with a way to solve it I think I should come with a new variable but I do not know how to fix this exactly! the challenge task is: 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') {
    li.p.target.style.backgroundColor = "#FDFF47"

  }
});
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>

5 Answers

SRIMUGAN J
PLUS
SRIMUGAN J
Courses Plus Student 5,345 Points
SRIMUGAN J
SRIMUGAN J
Courses Plus Student 5,345 Points

Hi Yousif,

1) They said just want to add the class name as "highlight", while you click the button inside the ul. for eg if you click the button inside first li, you just want to add the class name as 'highlight' in the "p" element inside the first li and like so on.

2) So if you want to target the previous element 'previoussibling' 'll help. target your previous sibling and add className as highlight.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = e.target.previousSibling
    li.className = "highlight";
  }
});

Hope this helps,

Siddharth Pandey
Siddharth Pandey
7,280 Points

How is the previous sibling of the button the 'p' element. Shouldn't it be the previous list element.

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Yousif,

I think this is an example where it's helpful to hit the Preview button and take a look at the page itself. You've got a bulleted list with some text in a paragraph tag and then a Highlight button. When you hit a highlight button you want the sibling (the paragraph tag) to have the class highlight, which presumably has a css rule attached to it. No need to add styling manually.

So let's break it down.

  • We can get the button element via e.target (since we're inside the if statement we know it's the button)
  • We want to target the paragraph that's a previous sibling (meaning it comes just before the button in the enclosing element - which is the li tag) of the button, so we use e.target.previousSibling
  • We want to add a class of highlight to it, so we say e.target.previousSibling += 'highlight';

Hope that makes sense!

Cheers :beers:

-Greg

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    e.target.previousSibling.className += 'highlight';
  }
});
Camille Le
Camille Le
5,408 Points
Camille Le
Camille Le
5,408 Points

Hi, this solution works too. Thanks!

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let p = e.target.previousElementSibling;
    p.classList.add("highlight"); 
  }
});
Tunbosun Ayinla
Tunbosun Ayinla
7,225 Points
Tunbosun Ayinla
Tunbosun Ayinla
7,225 Points

Hello, You can try this also; var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let p = e.target.previousElementSibling; p.className = "highlight"; } });

Tanner Harris
Tanner Harris
14,190 Points
Tanner Harris
Tanner Harris
14,190 Points

anyone*