Cant seem to track down how I'm not able to get the previous element sibling to be affected by the button

Question

Not sure if my code on line 6 is too short or if I didn't need to create the const on line 2?

app.js

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

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

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 · 2018-11-27T20:42:52Z

November 27, 2018 8:42pm

Hi

It wants you to get the element preceding the button that was clicked. You have the button element already when youre in that if statement, to access it, you can use e.target. now with the button you can get its previous sibling

let prevSib  = e.target.previousSibling;

or, to make it a bit more clear

let buttonEl = e.target;
let prevSib = buttonEl.previousSibling;

Now you can change that elements class to 'highlight' with the className property.

prevSib.className = 'highlight';

Hope that helps.

Welcome to the Treehouse Community

Looking to learn something new?

Ian Olson

Ian Olson

Cant seem to track down how I'm not able to get the previous element sibling to be affected by the button

1 Answer

Emmanuel C

Emmanuel C