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

Question

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.

app.js

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';
  }
});

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>

Answer 1 · 2020-12-08T21:33:24Z

December 8, 2020 9:33pm

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:

<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>

<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 :)

Welcome to the Treehouse Community

Looking to learn something new?

Fiona Mellink

Fiona Mellink

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

1 Answer

Cameron Childres

Cameron Childres

Fiona Mellink

Fiona Mellink