JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Bernard Smith
Bernard Smith
Front End Web Development Techdegree Student 8,731 Points

Little lost

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>

1 Answer

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.