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 Alex Rogers
Alex Rogers
9,844 Points

Having trouble with DOM Traversal Challenge: Adding class name to previous paragraph

Hi I'm at the challenge where it's asking me to insert a class name of 'highlight' in the previous paragraph of the node selected (in this case a button), and I've used both the insertBefore() and previousElementSibling, but I can't seem to figure it out. Could someone help?

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

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

1 Answer

Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

You have to first create a variable that targets .previousElementSibling. I used p since we are creating a p element but you can name yours whatever you'd like.

Once you create the variable you can the .className property to add the class name of "highlight".

See complete code below:

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

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

    p.className = "highlight";
  }
});
josephr
josephr
18,877 Points
josephr
josephr
18,877 Points

You could do it one line if you wanted. The problem with your code is that you are targeting the previous element of the list variable. Change that to event target it and it should work:

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

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