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

Vic Mercier
Vic Mercier
3,276 Points
Posted by Vic Mercier
Vic Mercier
3,276 Points

I don't understand this excercise.

I don't understand this excercise.

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

list.addEventListener('click', function(event) {
  if (event.target.tagName == 'BUTTON') {




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

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

Try breaking it down into steps.

The instructions say, "When any one of the buttons is clicked, a class of highlight should be added to the paragraph element immediately preceding that button...". Let's break that down a bit:

  • the provided code has already filtered out only BUTTON click events
  • using DOM traversal, select the element previous to the button
  • give that element a class name of "highlight"

That may sound like a lot, but it can be accomplished with a single line of code.

Vic Mercier
Vic Mercier
3,276 Points
Vic Mercier
Vic Mercier
3,276 Points

Thank you so much ! I don't know how you do to break down a problem that seems hard but it isn't!If I am annoying with my questions, it is because my mother tongue is french and I am 11 years old.

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

So you're getting started early learning coding — good for you! :+1: Breaking larger problems into smaller steps will become easier with practice. Happy coding!

Alexander Acker
Alexander Acker
18,123 Points
Alexander Acker
Alexander Acker
18,123 Points

The purpose of this exercise is to help understand the capabilities and methods that JavaScript has in accessing and changing other elements around the DOM during a particular web event. In this particular instance, the click of a particular button should enable code to look for that buttons sibling P element and make a change to it. I utilized the previousElementSibling property here to get this done as the P tag is directly before the button. Useful information within the MDN on this one.