Little lost

Question

I dont understand if i am suppose to create the class highlight

app.js

var list = document.getElementsByTagName('ul')[0];
let highLight = document.createElement = ('class')
highLight.className='highlight';
 let p = querySelector('p')
list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

    p.insertBefore(highLight, p)

  }
});

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-05-12T14:50:16Z

May 12, 2020 2:50pm

This challenge is about adding a class of "highlight" to a <p> element that's an immediate previous sibling of the button being clicked.

The e.target is the reference to the button element, the previousElementSibling property can locate the immediate previous sibling, and the className property can set the value of the class attribute.

Welcome to the Treehouse Community

Looking to learn something new?

Bernard Smith

Bernard Smith

Little lost

1 Answer

Mei Lee

Mei Lee