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

Tobi Bankole
Tobi Bankole
2,772 Points

Show List tab not functioning correctly

I have an issue where following the steps of this video, at around 6min 44s, Guil demonstrates the code where you can toggle to see the content using a Hide List/Show List condiitonal. I cannot for the life of me manage to get it to toggle between Show List and Hide List, it just seems to disappear completely for me. Please advise me where I am going wrong (for reference, what I am trying to describe occurs from 6min 52 to 6min 56):

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input');
const p = document.querySelector('p.description');
const button = document.querySelector('button');

toggleList.addEventListener('click', () => {
 if(listDiv.style.display == 'none') {
  toggleList.textContent = 'Hide List';
  listDiv.style.display = 'block'; 
} else {
  toggleList.textContent = 'Show List';
  listDiv.style.display = 'none';
}
});

button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';                        
});

2 Answers

Steven Parker
Steven Parker
182,493 Points

The show/hide list functions in this code are good. Perhaps there's an isssue in the HTML part of the code.

To facilitate the most complete analysis, make a snapshot of your workspace and post the link to it here.

Tobi Bankole
Tobi Bankole
2,772 Points

Here is the snapshot of my workspace:

https://w.trhou.se/wf82vx2656

KRIS NIKOLAISEN
KRIS NIKOLAISEN
53,553 Points

Your toggleList button is inside your list div so it gets hidden along with everything else. Reverse the order of these two lines so the button isn't included in the div

<div class="list">
<button id="toggleList">Hide List</button>  
Tobi Bankole
Tobi Bankole
2,772 Points

wow, I feel like a fool lol, thank you very much!