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
Mukul Gupta
8,760 PointsWhy 'block'?
If I enter listDiv.style.display in the console (while the list is visible), the console returns ''.
Why use 'block' if an empty string would work as well?
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Mukul,
You're only going to get an empty string initially before you click the button. The style property only represents inline styles that are applied using the style attribute.
Guil explains this around 0:44 in the video. He shows how all the properties are empty strings. It doesn't mean that these properties don't have any values it only means that they are not set as inline styles.
Initially, in the html the list div looks like this: <div class="list">
The reason you get back an empty string is because the display property is not set as an inline style.
I recommend that you inspect the list div html in your dev tools and then click the button to hide it.
You should see that the html gets updated to something like <div class="list" style="display: none;">
Now the display property is set as an inline style. If you try listDiv.style.display again in the console you should get back the string "none" instead of an empty string.
Go back to the html panel in dev tools and click the toggle button again to show the list.
You should see the html get updated to <div class="list" style="display: block;">
Now if you go back to the console and check listDiv.style.display it should come back as "block".
ywang04
6,762 PointsJason, thanks for your information. :)
Harpreet Singh
3,830 Pointswhy do I have to click on the btn twice for this effect to start working?
btnTogList.addEventListener('click', () => {
if(list.style.display === 'block'){
list.style.display = 'none';
}else{
list.style.display = 'block';
}
});
ywang04
6,762 PointsThe problem is list.style.display is " " for default. When you click the hide button for the first time, the conditional statement goes to "else" block directly as list.style.display is " " instead of block. Then you click the button again, list.style.display is "block" now due to else block. The if statement takes effect. That is why you click on the btn twice for this effect to start working. But I am not sure why the list.style.display is " " for the first time. Does anybody know? Thanks a lot.
Jason Anello
Courses Plus Student 94,610 PointsHi Yang,
I think my answer has the explanation you're looking for on your follow up question.
Duarte Monteiro
22,300 PointsDuarte Monteiro
22,300 Pointsdisplay
'block'is the default style the browser give it, it works either way, it's just a little more explicit.