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 Getting All Children of a Node with children

Kate C
Kate C
13,589 Points
Posted by Kate C
Kate C
13,589 Points

My buttons are not making the list moving...please help

I've been following along, the console does not show any errors. 

const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');
const listDiv = document.querySelector('.list');
const listUl = listDiv.querySelector('ul');
const lis = listUl.children;

function attachListItemButtons (li) {
  let up = document.createElement('button');
  up.className = 'up';
  up.textContent = 'Up';
  li.appendChild(up);
  let down = document.createElement('button');
  down.className = 'down';
  down.textContent = 'Down';
  li.appendChild(down);
  let remove = document.createElement('button');
  remove.className = 'remove';
  remove.textContent = 'Remove';
  li.appendChild(remove);
}


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

for (let i = 0; i < lis.length; i += 1){
  attachListItemButtons(lis[i]);
}

<div class="list">

      <p class="description">write sth</p>
      <input type="text" class="description">
      <button class="description">Click me!</button>

      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>

      <input type="text" class="addItemInput">
      <button class="addItemButton">Add!</button>
      <button class="removeItemButton">Remove!</button>
    </div>

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

This code creates the buttons, but the code that makes the buttons do something isn't here.

The code that makes them work is about 34 lines long and appears in the video starting at line 32 (just after the code shown here), beginning with "listUl.addEventListener ...".

Kate C
Kate C
13,589 Points
Kate C
Kate C
13,589 Points

Thank you Steven

Here is what is missing:

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); //parent, sibling, reference
      }
    }
    if (event.target.className == 'down'){
      let li = event.target.parentNode;   
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi){
        ul.insertBefore(nextLi, li); //parent, sibling, reference
      }
    }
  }
});
Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

With this code added, the buttons move the list items as expected.

Perhaps you should make a snapshot of your workspace and post the link to it here, to allow the issue to be more precisely replicated.