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

Posted by Lawrence Babay
Lawrence Babay
6,941 Points

Please help!

Hi all,

I'm stuck in this challenge. Would somebody please explain to me what I'm doing wrong.

Thanks, Lawrence

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
     }
});
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

Yuval Blass
Yuval Blass
18,134 Points
Hi Lawrence,

I don't understand what do you wrote there, but I'll try to explain how to solve this challenge.

My first advice for this type of challenges would be to look at the HTML file and re-read the question; "When any one of the buttons is clicked, a class of highlight should be added to the paragraph element."

  1. Find the relationship between the button and the p element (In other words, what sibling method do you need to use to get the p element out of the button).
  2. Then add a class highlight to the p element (hint, you use plain javascript; click here for more info ).
Hope this help!
Lawrence Babay
Lawrence Babay
6,941 Points
Lawrence Babay
Lawrence Babay
6,941 Points

Hi Yuval,

Thanks for the hint! I got it!.