JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Mark Wisdom Reeves
Mark Wisdom Reeves
Full Stack JavaScript Techdegree Student 15,509 Points

Complete the code to add a class of highlight to a <p> element that's an immediate previous sibling of the button being

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

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { list.parentNode.nextSibling; list.style.className = "highlight"; console.log(list);

} });

<!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>

app.js
var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
   list.parentNode.nextSibling;
     list.style.className = "highlight";
       console.log(list);


  }
});
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

Steven Parker
Steven Parker
201,323 Points

You won't need to reference the parent here, the paragraph is a sibling of the button. You also won't need to reference the "list" element, you can use traversal with the button as the reference.

And remember, it's the paragraph you want to change the class on, not the list.

And you won't need to "log" anything for the challenge.