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 Mirko Nobelen
Mirko Nobelen
7,507 Points

styling elements javascript, the show list button does not appear

Dear Sir/Madam

I can't figure why in my code the show list button does not appear. Strangely when coding all the first 'style.display' is green but later in my code it appears as orange, it may be nothing but I don't know why.

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

Best regards,

Mirko

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

You might need to share more of the code to illustrate the problem. You can share the entire project at once if you make a snapshot of your workspace and post the link to it here.

Eric Butler
Eric Butler
33,512 Points

Hi Mirko, It may just be a result of copy-pasting your code into this question, but I do notice that you have a couple space-characters between your document.querySelectors and their opening parentheses -- for p and listDiv -- that could be causing an issue. Otherwise, let me just format your code a little better so someone else might be able to help:

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

Hope you figure it out! Cheers.

Keith Kelly
Keith Kelly
21,326 Points

Can you share your workspace? It would be useful to see the html as well.

1 Answer

Mirko Nobelen
Mirko Nobelen
7,507 Points
Mirko Nobelen
Mirko Nobelen
7,507 Points

Dear Both,

Thank you so much for your time, I found it.

The error was in my html: I had put the button inside the div.

However I don't fully understand where or how javascript reads that the display is 'none' or 'block'

(if display is none then execute this, but where does it read '== none' ,

Best regards,

Mirko

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

Congratulations on resolving your own issue. :+1: