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

Mick Webb
Mick Webb
2,246 Points

Code has stopped working. I am following the video and all my buttons have stopped working. Help please.

HTML:

<!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</li> <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> <li>amethyst</li> <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> <li>lavender</li> <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> <li>plums</li> <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> </ul> <input type="text" class="addItemInput"> <button class="addItemButton">Add Item</button> <button class="removeItemButton">Remove last item</button> </div> <script src="app.js"></script> <script src="temp.js"></script> </body> </html>

App.js(Javascript):

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 removeItemButton = document.querySelector('button.removeItemButton'); const listItems = document.getElementsByTagName('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 == "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(letLi){ 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 = ''; })

removeItemButton.addEventListener('click', ()=> { let ul = document.getElementsByTagName('ul')[0]; let li = document.querySelector('li:last-child'); ul.removeChild(li);

})

You should indent your code. i have indented your code so myself and someone else can take a look at your code and possibly answer.

<!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</li>
            <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> 
            <li>amethyst</li>
            <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> 
            <li>lavender</li>
            <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> 
            <li>plums</li>
            <button class="up">Up</button> <button class="down">down</button> <button class="remove">Remove</button> 
         </ul>
         <input type="text" class="addItemInput"> <button class="addItemButton">Add Item</button> <button class="removeItemButton">Remove last item</button> 
      </div>
      <script src="app.js"></script> <script src="temp.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 removeItemButton = document.querySelector('button.removeItemButton');
const listItems = document.getElementsByTagName('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 == "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 (letLi) {
                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 = '';
})

removeItemButton.addEventListener('click', () => {
    let ul = document.getElementsByTagName('ul')[0];
    let li = document.querySelector('li:last-child');
    ul.removeChild(li);

})

Can you specify what error are you having?

1 Answer

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

Try this it should work