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

Ahmad Alshaar
Ahmad Alshaar
10,193 Points
Posted by Ahmad Alshaar
Ahmad Alshaar
10,193 Points

I got stuck in this Code challenge.

Hello every one! i tried lots of ways to solve this challenge but i could not the question : Ahmad Alshaar I got stuck in this Code challenge.

complete the code to add a class "highlight " to "p " element that is the immediate sibling of the button being clicked

any ideas are so much appreciated Thank u guys!

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
 let x  = document.getElementsByTagName('p').previousElementSibling;

  }
});
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>
csr13
csr13
33,290 Points
csr13
csr13
33,290 Points

Hi, the challenge is asking you to select the previousElementSibling of each button in the variable list which is an unordered list.

You don't need to select a new p element, because you can select the previous siblings of all the buttons with selectPreviousSibling on the target of the event.

You also need to add a highlight class to the p element which you can do so like this:

e.target.previousElementSibling.classList.add('highlight');

:star:

1 Answer

remon
remon
10,620 Points
remon
remon
10,620 Points

HI Ahmad , When you click a highlight button the sibling, in this case, the paragraph <p></p> tag to have the class highlight. The class highlight has a CSS rule assigned to it.

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

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

thank u very much it works