JavaScript JavaScript and the DOM Traversing the DOM Solution: Using nextElementSibling

Yosif Qassim
Yosif Qassim
6,367 Points

down button is not working

why the button is not working ?????

const input = document.querySelector('input');
const p = document.querySelector('p.d');
const button = document.getElementsByClassName('down');
const listUl = listDiv.querySelector('ul');



listUl.addEventListener('click', (event) => {

  if (event.target.className == 'down') {
    let li = event.target.parentNode;
  let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
    if (nextLi) {
    ul.insertBefore( nextLi , li);
    }
  }                        
});
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>    
  <p class="d">Things that are purple:</p>

    <ul>
      <li>grapes 
        <button class="down">Down</button>
      </li>
      <li>amethyst
      <button class="down">Down</button>
      </li>
      <li>lavender
      <button class="down"> Down</button>
      </li>
      <li>plums
  <button class="down">Down</button>
      </li>
    </ul>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

In your code you have this line:

const listUl = listDiv.querySelector('ul');

But you don't set listDiv to a value or element before this line. This means that ListUI is undefined and when you set an event listener to it, nothing will happen.