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 Christina Araujo
.a{fill-rule:evenodd;}techdegree
Christina Araujo
Full Stack JavaScript Techdegree Student 4,819 Points

I am having a hard time adding "highlight" class to previous element.

I am really trying to retrain my brain how to look at problem solving.

It is to my understanding that I need to basically add the class "highlight" to the previous sibling element of <p>.

app.js 
const list = document.getElementsByTagName('ul')[0];
const button = document.getElementsByTagName('button');
//Eariler I was returning an error regarding "button" not being defined so I selected it from the DOM, before moving on to the eventlistener

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

//I call myself attempting to get the previous sibling using the Node.previousElementSibling property.  
//Then placing that into the "prevSib" variable to then add the "highlight" class using ".className" property. 

    let prevSib = button.previousElementSibling;
    prevSib.className = "highlight";
//I keep getting an error, "(evaluating 'prevSib.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

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

You're close, but "button" represents a collection of all the buttons. You want to use just the one pushed to identify the correct sibling paragraph, so use "e.target" as a reference to the pushed button:

    let prevSib = e.target.previousElementSibling;
Christina Araujo
.a{fill-rule:evenodd;}techdegree
Christina Araujo
Full Stack JavaScript Techdegree Student 4,819 Points

Thank you so much! It's so funny (in retrospect) I spent my whole hour long lunch trying to figure this out. lol. Thank you again, I understand the idea and reasoning behind the code now.

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

Christina Araujo — Glad to help. You can mark a question solved by choosing a "best answer".

Happy coding!

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

list.addEventListener('click', function(e) { if (e.target.tagName === 'BUTTON') { if(e.target.textContent.toLowerCase() === 'highlight') { let p = e.target.previousElementSibling; if (p.tagName === 'P') { p.classList.add('highlight'); } } } });

Christina Araujo
.a{fill-rule:evenodd;}techdegree
Christina Araujo
Full Stack JavaScript Techdegree Student 4,819 Points

Thank you, this was a great reference point for me.