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

Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points
Posted by Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points

The buttons are not working. My code matches the instructors, help!

The buttons are appearing when I add an item, but all of the buttons are non-responsive. Is there something I am missing?

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);
}

The rest of the code edited during this video:

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

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

It appears that you don't have the listUl eventListener. This controls the button clicks.

The code is below for that function:

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);
      }
    } 
  }
});
Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points
Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points

I did have that, I just didn't include it; I should have, sorry. Turns out I needed to have "className" instead of "classname" cheers!

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Glad you sorted it out, Heidi!

Too bad I didn't catch that typo, though. :-/

Thanks for following up. :-)