Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Using previousElementSibling and insertBefore

Hamzah Iqbal
seal-mask
.a{fill-rule:evenodd;}techdegree
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 Points
Posted by Hamzah Iqbal
.a{fill-rule:evenodd;}techdegree
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 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
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points 
/*
button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';
});
*/

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

Zimri Leijen
Zimri Leijen
11,835 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
231,248 Points
Steven Parker
Steven Parker
231,248 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.