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

Giovanni P.
Giovanni P.
4,803 Points
Posted by Giovanni P.
Giovanni P.
4,803 Points

Sibling Traversal Code challenge says its not working when it is...

Hello!

So in the Sibling Traversal Coding Challenge in the JavaScript and the DOM course, it wants me to get the previous sibling element of each button and add the class "highlight" to it when the button is clicked. The code I'm using is this:

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

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

In the preview this works perfectly, but it tells me "Bummer! One or more of the buttons is not highlighting it's sibling," when it is. If someone could please help me that would be great. Thanks!

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

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

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You're doing great, and this comes down to CSS understanding what you mean, but not the challenge checker. The challenge checker is looking for a class of "highlight", but you are adding " highlight". In JavaScript, these are two entirely different strings. But because CSS ignores that blank, it still shows the results properly.

Long story short: change " highlight" to "highlight", and your code passes! :sparkles:

Giovanni P.
Giovanni P.
4,803 Points
Giovanni P.
Giovanni P.
4,803 Points

Oh okay thanks! I was adding the space because I imagined the className as a string just like it is in the html tag attribute, so I was adding the space so they wouldn't become one whole string. Thanks for the help!