Why works my code just for the first element in my list?

Question

My code works just for my first li-element named "grapes". I don't get why. Can you help me out?

<!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="remove">Remove</button>
        <button class="up">Up</button>
      </li>
      <li>amethyst 
        <button class="remove">Remove</button>
        <button class="up">Up</button>
      </li>
      <li>lavender 
        <button class="remove">Remove</button>
        <button class="up">Up</button>
      </li>
      <li>plums 
        <button class="remove">Remove</button>
        <button class="up">Up</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 addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const listUl = listDiv.querySelector("li");

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;
        ul.insertBefore(li, prevLi);
      }
  }
});


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

Answer 1 · 2018-04-14T21:37:24Z

April 14, 2018 9:37pm

Hey!

It looks like you are selecting only one element. Try using querySelectorAll('li'). This will return an array of all li items in your document. Then you could loop through the array adding the event listener to all array items.

Hope this helps!

Welcome to the Treehouse Community

Looking to learn something new?

David Regel

David Regel

Why works my code just for the first element in my list?

1 Answer

trio-group I.AM

trio-group I.AM

David Regel

David Regel