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) Making Changes to the DOM Styling Elements

Posted by Nuriddin Ikramov
Nuriddin Ikramov
5,866 Points

The code explanation

I have two questions: 1) Could you explain the conditional statement? I dont understand why I should use if(listDiv.style.display=='none'), as the default value of display is 'block'? Why does it enter the first statement?

2 Answers

Aled Bidder
Aled Bidder
7,863 Points
Aled Bidder
Aled Bidder
7,863 Points

I was confused about this until I remembered that the conditional statement runs on the click of the button.

At that point the function checks the display style of the div.

The first time you click it, the display is set to an empty string (''), and so it runs the else statement and changes the display to 'none' and thus hides the div.

If you then click the button again, the display is set to 'none' and so the function runs the first part of the statement and changes the display to 'block' and thus shows the div again.

Finally working this out has been a huge relief! I hope it helps you too 👍

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The default value of style.display is not "block", it's simply an empty string ("").

For some elements (for example, "div") the default display mode is block, but that default is overridden when something is assigned directly to the style.display attribute.