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 Ashton Rose
Ashton Rose
1,579 Points

Any reason not to change the display value to ' ' instead of back to 'block'?

I wrote my code a bit different. It seems to accomplish the same thing, but I'm wondering if the way I'm doing it is okay. 

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

First of all, I changed the order of the conditional statements, which I assume is fine, but I'm mostly wondering if there's any reason that I can't just change the display value to a blank value instead of changing it back to 'block'.

I understand that the default display value of a div element is 'block', but wouldn't my code accomplish the same thing? Wouldn't listDiv.style.removeProperty('display'); do the same thing as well?

2 Answers

Stephan Olsen
Stephan Olsen
6,650 Points
Stephan Olsen
Stephan Olsen
6,650 Points

In this case it does work if you leave your display value as an empty string. However, let's say you made this change in your css.

listDiv{
  display: none;
}

This would make your div hidden as default, but now your code wont work, since the display value is blank. This is because the default value is no longer display: block.

Either way I would definetely suggest you to make your code as clear and descriptive as possible. Personally I'd find the code easiest to understand by typing out the value.

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

Hi Ashton,

Yes, you can set the div style to block instead of ' ', or you can remove the property all together. Actually, there a lot of ways to accomplish the same result--you could toggle a class instead or altering inline style. I would recommend what works best for the efficiency, consistency and beauty of your code.