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

Fernando Jimenez
PLUS
Fernando Jimenez
Courses Plus Student 8,455 Points
Posted by Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points

How come is not returning p as the nextElementSibiling?

I can't get this to grab the p next to li so I can add the class "highlight"

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

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

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You'll want to base your traversal on the click target, not the list itself.

But also, when I look at the HTML, those paragraphs seem to be previous to the buttons, not next after them. :wink:

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

So, if you currently have:

    e.target.tagname.previousSibling.addClass(".highlight");

It looks like a few extra things happened during that change:

  • you wouldn't use "tagName" for traversal
  • instead of "previousSibling" it should be "previousElementSibling"
  • the class name shouldn't have a period with it
  • there's no "addClass" method (you may be thinking of jQuery), but there is "classList.add"

And yes, you need "e.target". Just "target" would be undefined.

Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points
Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points

So I tried

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

list.addEventListener('click', function (e) { if (e.target.tagName == 'BUTTON') { e.target.tagname.previousElementSibling.classList.add("highlight"); } });

but still get it wrong, it seems that I am not using previousElementSibling properly.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Perhaps you overlooked the first of those hints .. you still have "tagname" in your traversal.

Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points
Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points

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

list.addEventListener('click', function (e) { if (e.target.tagName == 'BUTTON') { e.target.previousElementSibling.classList.add("highlight"); } });

I am still getting an error even after getting rid of tagname; not sure whats going on to be honest.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Now it looks right to me. So I tested it by copy/pasting your line directly into the challenge and it passed!

Maybe try a browser restart?

Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points
Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points

wierd, it gave me an error on the console, but ok...

Thanks!

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

But did it also pass the challenge?

Fernando Jimenez
PLUS
Fernando Jimenez
Courses Plus Student 8,455 Points
Fernando Jimenez
Fernando Jimenez
Courses Plus Student 8,455 Points

what If i try this inside the if statement?

e.target.tagname.previousSibling.addClass(".highlight");

I tried but it didn't work, the console is not recognizing what target is.

Inside that if statement, does "target.tagName == ' <button>' ? o do I have to say e.target.tagname?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I added a comment to my answer.