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

Posted by matt mccherry
matt mccherry
4,493 Points

Visibility not applying on buttons! So close to Solution!

I've gone about this challenge a little bit different (maybe in a worse way I'm not sure). I've tried to reset the visibility on all of my buttons when a button is pressed. I've gone through and console.logged everything and it seems it's seeing the buttons being pressed but not actually changing the style weird! Been working on this for maybe 3-4 hours now frustrating me. Any help would be appreciated.

const toggleList = document.getElementById("toggleList");
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description')
const descriptionButton = document.querySelector('button.description')
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const listUl = listDiv.querySelector('ul');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;

//This is where we try to set all buttons to visible
function resetAllButtons(list) {
  let listLength = list.length;
  for (let i = 0; i < listLength; i++) {
    let up = list[i].querySelector('button.up');
    let down = list[i].querySelector('button.down');
    let remove = list[i].querySelector('button.remove');
    up.style.visibility = 'visible';
    down.style.visibility = 'visible';
    remove.style.visibility = 'visible';
  }
}

//This is where we hide the top and bottom button (up and down respectively)
function hideButtons(list) {
  let listLength = list.length;
  for (let i = 0; i < listLength; i++) {
    let up = list[i].querySelector('button.up');
    let down = list[i].querySelector('button.down');
    if (list[i] == firstListItem) {
      up.style.visibility = 'hidden';
    }  
    else if (list[i] == lastListItem) {
      down.style.visibility = 'hidden';
    }
    else {
      up.style.visibility = 'visible';
      up.style.visibility = 'visible';
    }
  }
}

//Code from previous task with functions entered at the bottom.

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 ul = li.parentNode;
      let prevLi = li.previousElementSibling;
      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);
      }
    }
    resetAllButtons(lis);
    hideButtons(lis);
  }

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

});

// I have left the stuff from the other tasks out from here.

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The variables "firstListItem" and "lastListItem" are constants, established before any buttons are pushed. Then, anytime anything moves the buttons that were originally at the top and bottom are hidden.

This creates the illusion that none are being reset.

Also, in the final "else" of "hideButtons", the same line is repeated twice (probably not what was intended).

matt mccherry
matt mccherry
4,493 Points

Thanks Steven, such a simple thing I missed! Part of the problem with changing functionality of buttons stuff like this gets missed! Feeling a bit silly not getting that, I was looking for all the problems within my func resetAllButtons rather than elsewhere... doh!

I just ended up adding,

let firstListItem = listUl.firstElementChild;
let lastListItem = listUl.lastElementChild;

to my func disableButtons();