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

nextElementSibling not code not working

So I've completed the challenge to the best of my ability and my down button is still not firing.

<!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>
    <button id="toggleList">Hide list</button>
    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="description">Change list description</button>
      <ul>
        <li>grapes
          <button class="up">Up</button>
          <button class="down">Down</button>
          <button class="remove">Remove</button>

        </li>
        <li>amethyst
          <button class="up">Up</button>
          <button class="down">Down</button>
          <button class="remove">Remove</button>
        </li>
        <li>lavender
          <button class="up">Up</button>
          <button class="down">Down</button>
          <button class="remove">Remove</button>
        </li>
        <li>plums
          <button class="up">Up</button>
          <button class="down">Down</button>
          <button class="remove">Remove</button>
        </li>
      </ul>
      <input type="text" class="addItemInput">
      <button class="addItemButton">Add item</button>

    </div>
    <script src="app.js"></script>
  </body>
</html>
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

listUl.addEventListener('click', (event) => {
  if (event.target.tagName == 'BUTTON') {
    if (event.target.className == 'remove') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
    ul.removeChild(li);
    }
    if (event.target.className == 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
      ul.insertBefore(li, prevLi);
      }
    if (event.target.className == 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
      ul.insertBefore(nextLi, li);
      }
    }
   }
  }
});


toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';                        
    listDiv.style.display = 'none';
  }                         
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
  addItemInput.value = '';
});

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,287 Points

You have a bracketing issue. There should be one more closing bracket at the end here:

   if (event.target.className == 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
      ul.insertBefore(li, prevLi);
      }
    } 

And one less closing bracket at the very end here:

 if (event.target.className == 'down') {
      console.log("down click")
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
      ul.insertBefore(nextLi, li);
      }

   }
  }
});