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

Fiona Mellink
Fiona Mellink
7,117 Points

Hi, please can someone explain what we're trying to do in the previous sibling challenge? Thanks in advance.

In the previous sibling challenge (https://teamtreehouse.com/library/javascript-and-the-dom-2/traversing-the-dom/sibling-traversal), I am not clear on what the question is asking for. I have completed what I understood to be the ask but am being told that one or more of the previous elements are not being selected.

To test, I tried adding red colour to the p element and when I click any of the highlight buttons, the text on the corresponding line turns red. Please could someone explain what the ask of the challenge is? I've attached my code however my question is really about what I am trying to do first, so that I can try to write the correct code.

Any help greatly appreciated as I'm a little stuck!

Thanks in advance.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let p = event.target.parentNode;
    let prevP = p.previousElementSibling;
    let li = p.parentNode;
    let ul = li.parentNode;
    p.className = 'highlight';
<!DOCTYPE html>
        <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="style.css" />
            <h1>Making a Webpage Interactive</h1>
            <p>Things to Learn</p>
                <li><p>Element Selection</p><button>Highlight</button></li>
                <li><p>Event Listening</p><button>Highlight</button></li>
                <li><p>DOM Traversal</p><button>Highlight</button></li>
        <script src="app.js"></script>

1 Answer

Cameron Childres
Cameron Childres
11,818 Points

Hi Fiona,

The challenge wants you to add the class of "highlight" to the previous element sibling of the button that is clicked. Your code adds the class to the parent.

Take a look at the HTML:

        <p>Element Selection</p>
        <p>Event Listening</p>
        <p>DOM Traversal</p><button>Highlight</button>

<p> and <button> are both children of <li>, which is a child of <ul>. This means that <p> and <button> are siblings with <p> being the previous sibling of <button>.

In your code you set p equal to event.target.parentNode. Since <li> is the parent of the clicked button, you've assigned <li> to p.

Instead, try using previousElementSibling on the button to select <p>.

I hope this helps steer you in the right direction, let me know if you want any further help or run in to any issues :)

Fiona Mellink
Fiona Mellink
7,117 Points

Thank you so much @Cameron Childres! Took me a little while but your notes were super helpful - really appreciate it.