JavaScript JavaScript and the DOM Traversing the DOM Using previousElementSibling and insertBefore

Hamzah Iqbal
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 8,113 Points

Why isn't my code responding to any actions?

Whenever i press any button, nothing seems to happen. Any inputs?

const input = document.querySelector('input.description');
const p = document.querySelector('p.description');
const button = document.querySelector('button.description');
const toggleList = document.getElementById("toggleList");
const Divlist = document.querySelector(".list");


toggleList.addEventListener("click", () => {

if(Divlist.style.display == "block") {
  Divlist.style.display = "none"
  toggleList.textContent = "Show List";

}


if (event.target.className == "up") {


  var li = event.target.parentNode;
  var prevlist = li.previousElementSibling;
  var ul = li.parentNode;

  if (prevLi) {
  ul.insertBefore(li, prevlist);

  }


  if(event.target.className == "down")
  {
    var li = target.parentNode;
    var nextList = li.nextElementSibling;
    var ul = ul.parentNode;

    if(nextList) {

      ul.insertBefore(li, nextList);


  }
}

else {

     Divlist.style.display = "block";
  toggleList.textContent =  "Hide list";
}          





}
});
/*
button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';
});
*/

Here is the 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
      <button class= "up">Up</button>
      </li>

      <li>amethyst
      <button class= "up">Up</button></li>

      <li>lavender
      <button class= "up">Up</button></li>

      <li>plums
      <button class= "up">Up</button>
      </li>
    </ul>
                            </div>


    <script src="app.js"></script>
  </body>
</html>

2 Answers

Zimri Leijen
Zimri Leijen
8,976 Points
/*
button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';
});
*/

if you remove the comments /* and */ it does function. I tested it and it worked fine.

Hamzah Iqbal
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 8,113 Points

I tried that, but it still doesn't seem to work. I also included the code within the click event.

Zimri Leijen
Zimri Leijen
8,976 Points

As Steven Parker said only one of the buttons (the description button) should work with that code.

Does that one work?

Steven Parker
Steven Parker
195,257 Points

Removing the comments at the end will enable the "Change list description" button, which will then work.

But the "toggle" button doesn't work because the first test is for the display setting to be "block", which is not the state initially (unless it is set to something, it is empty by default). Also, much of the other code in that handler seems to be intended for the "up" buttons, but it should be in a different handler.

Finally, there's currently no handler established for the "up" buttons so they are also not functional.