Need help going further. Assistance will be greatly appreciated!

Question

https://teamtreehouse.com/library/javascript-and-the-dom-2/traversing-the-dom/sibling-traversal

app.js

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let p = document.getElementsByTagName('p');
         p.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>

Answer 1 · 2017-07-06T21:22:07Z

July 6, 2017 9:22pm

It looks like you're working on a different objective.

Your code seems to be changing the arrangement of objects in the DOM tree. But the challenge objective is much simpler: "a class of highlight should be added to the paragraph element immediately preceding that button".

So your node traversal only needs one step and doesn't involve the parent. And when you identify the correct element all you will do is add a class to it.

Answer 2 · 2017-07-08T16:42:05Z

July 8, 2017 4:42pm

let p = e.target.previousElementSibling; p.className = 'highlight';

Welcome to the Treehouse Community

Looking to learn something new?

OSMAN KAMARA

OSMAN KAMARA

Need help going further. Assistance will be greatly appreciated!

2 Answers

Steven Parker

Steven Parker

It looks like you're working on a different objective.

OSMAN KAMARA

OSMAN KAMARA

Steven Parker

Steven Parker

OSMAN KAMARA

OSMAN KAMARA