Sibling Transversal

Question

Hello,

I need to create the Class name ‘highlight’ in the previous Element Sibling of the <p> Element once the button has been clicked.

app.js

var list = document.getElementsByTagName('ul')[0];
var paragraph = document.querySelector('p').previousElementSibling;

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
  paragraph.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-06-09T10:03:35Z

June 9, 2020 10:03am

You can't identify the correct paragraph until the button is clicked. Then you can use traversal attributes of the button itself to find it.

Welcome to the Treehouse Community

Looking to learn something new?

louiseretzlaff

louiseretzlaff

Sibling Transversal

1 Answer

Steven Parker

Steven Parker