Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Not sure what I'm being asked to do. I've tried various methods and none of them seem to be working

It says to make the p element before the button have the class highlight when clicked. I can't see where I am going wrong and am unsure on how to go about it. I've tried a google search and what not, to no avail. Please help!

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

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

Heidi Puk Hermann
Heidi Puk Hermann
33,366 Points

first of, you don't need to create the button-variable at line 2. it is not a part of the assignment (and will therefor create an error) but you don't need it.

Second the previousElementSibling is a read-only property, so you cannot use it to alter the sibling <p>-tag. Instead you should use the e.target to tell what button is pushed and previousSibling to get the <p>-tag. Then your code will be:

...
e.target.previousSibling.className = "highlight";
...
Mike Hatch
Mike Hatch
14,940 Points

This is a tough one. I tried to resolve it just now, but then saw you beat me to it. I struggle with the DOM in general. It is so much code for so little. It seems most students tried to solve it by adding multiple new lines of code when it is asking you to add just one. It does actually pass if you use previousElementSibling with event.target before it instead of button.

Thanks a bunch, the explanation you added is very helpful too!

Heidi Puk Hermann
Heidi Puk Hermann
33,366 Points

@Kaleshe, you're very welcome :)

@Mike - I've spent quite some time getting my head around the DOM and how to use it. I agree that it can be a lot of work, but on the other hand, once you get your head around it, you can really do some strong stuff rather "simple". And interesting that it does work with previousElementSibling since the documentation said it is a read-only property... Well life is interesting :)

Mike Hatch
Mike Hatch
14,940 Points

Heidi, yes the DOM really is its own beast. It requires its own separate study: HTML/CSS/JS/DOM. I think Douglas Crockford lists it as an "awful" part of JS. I couldn't agree more.