Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Getting All Children of a Node with children

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
217,443 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

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
217,443 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.