JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Olivia Wyatt
Olivia Wyatt
Full Stack JavaScript Techdegree Student 4,372 Points

I can't figure out how to select the previous sibling of all the buttons.

I tried simply selecting the previous sibling of the of the button clicked by doing then assigning a class name to that but the error that popped up said one or more of the buttons were not selected. Then I tried looping through the buttons and selecting the previous sibling of each button individually. Still getting the same error. Any help would be greatly appreciated! Thanks in advance!

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

list.addEventListener('click', function(e) {
  if ( == 'BUTTON') {
    let button = document.getElementsByTagName('button');
    for(let i = 0; i < button.length; i++) {
      let prevSib = button[i].previousElementSibling;
      prevSib.className = "hightlight";

<!DOCTYPE html>
        <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="style.css" />
            <h1>Making a Webpage Interactive</h1>
            <p>Things to Learn</p>
                <li><p>Element Selection</p><button>Highlight</button></li>
                <li><p>Event Listening</p><button>Highlight</button></li>
                <li><p>DOM Traversal</p><button>Highlight</button></li>
        <script src="app.js"></script>

1 Answer

Steven Parker
Steven Parker
200,589 Points

You're close, but have a few issues:

  • you don't need a loop, you only need to highlight the one paragraph next to the clicked button
  • the provided code has already determined that "" is the button, you don't need a select function
  • the class name to be assigned is "highlight" (with only one "t"), not "hightlight"