JavaScript JavaScript and the DOM Making Changes to the DOM Styling Elements

status 401
status 401
13,816 Points

explanation about this code

toggleButton.addEventListener("click", () => {
  //if the display is default click tp hide the list                  
 if(listDiv.style.display == "none") {
  toggleButton.textContent = "Hide list";
  listDiv.style.display = "block"
} else {
  toggleButton.textContent = "Show list";
   listDiv.style.display =  "none"; 
  }

someone can explain to me the statment in the if block?

I know that "none" means to literally hide it and "block" means its deafult.

why we check if the listDiv.style.display is equal to "none" if it can't be "none" since when we open the page we see the list.

1 Answer

Piotr Manczak
Piotr Manczak
Front End Web Development Techdegree Student 13,382 Points

"none" means to literally hide it and "block" means its deafult or to show. We started with 'none', however I agree that it would be more logical to start with 'block'. Functionally it's this same.