How to add class name to next sibling element?

Question

Perhaps I'm not understanding this correctly, but I'm thinking the instructions are to add a class of "highlight" in the next paragraph element, relative to where the "button" element is clicked. Wouldn't this be correct in doing so and am I understanding the code challenge?

app.js

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = e.target.parentNode;
    let nextLi = e.target.nextSibling;

    nextLi.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 · 2017-08-09T17:23:13Z

August 9, 2017 5:23pm

good job, Michael I did like this way, but a slightly different

 e.target.previousElementSibling.className = 'highlight' ;

Answer 2 · 2017-08-09T16:59:25Z

August 9, 2017 4:59pm

I've figured it out. I kept reading this wrong and had my syntax incorrect. What was being asked was the add a class name to the previous list element paragraph to the button that is clicked.

let prevLi = e.target.previousSibling.className = "highlight";

P.S. For some reason the backticks aren't working for highlighting code

Welcome to the Treehouse Community

Looking to learn something new?

Michael Brown

Michael Brown

How to add class name to next sibling element?

2 Answers

Thayer Y

Thayer Y

Michael Brown

Michael Brown