JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Lawrence Babay
Lawrence Babay
5,838 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

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
5,838 Points

Hi Yuval,

Thanks for the hint! I got it!.