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

Bryce Edwards
Bryce Edwards
1,586 Points
Posted by Bryce Edwards
Bryce Edwards
1,586 Points

Can't figure this out! - I've been stuck on this for a week, losing motivation and concentration..

I'm finding it so difficult to try and traverse around siblings :(

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    const li = list.querySelector('li');
    li.previousElementSibling.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

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I can tell you've really worked on this and really thought about it. In fact, I think you may have overworked and over-thought it at this point. So, I'm going to show you what I did and include an explanation.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {  //if the target is a button
    e.target.previousSibling.className = "highlight";  //set the class name of the previous sibling to "highlight"
  }
});

There is no need to create any new variables here. Everything that needed to be selected already was selected. The list variable contains the first unordered list in the DOM. We take that first unordered list and add an event listener to it that's listening for a click. We pass the event in as e. Then we say ìf the thing that was clicked was a button, add the class name of "highlight" to the sibling immediately preceding it.

Hope this helps! :sparkles:

Bryce Edwards
Bryce Edwards
1,586 Points
Bryce Edwards
Bryce Edwards
1,586 Points

brilliant, I can't believe it was so simple! ?? Thanks!

Unsubscribed User
Unsubscribed User
15,508 Points
Unsubscribed User
Unsubscribed User
15,508 Points

Yikes! So sorry I didn't help answer this one sooner, Bryce Edwards! It looks like Jennifer Nordell has you covered here. ?