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

        <button class="down">Down</button>
      <button class="down">Down</button>
      <button class="down"> Down</button>
  <button class="down">Down</button>
    <script src="app.js"></script>

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.