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 DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Vic Mercier
Vic Mercier
3,276 Points
Posted by Vic Mercier
Vic Mercier
3,276 Points

li.style.display = "";

I don't understand how this statement work.Please explain it with the clearest description possible.

4 Answers

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

This is a bit difficult without more context, but I'll take a guess and break it down:

  • li :point_left: I'm guessing this variable represents a "list item" element.
  • .style :point_left: the style property controls how (or if) an element is shown
  • .display :point_left: this particular sub-property controls the display mode
  • = "" :point_left: this emtpy string clears out any previously set values for the display mode

So the whole thing just resets the display property back to what it was initially. One possible reason to do this is if it had been previously set to "none" to make the element invisible but now you want it to be seen again.

Tom Geraghty
Tom Geraghty
24,174 Points
Tom Geraghty
Tom Geraghty
24,174 Points 
li.style.display = '';

resets the display property back to what it was initially

I also heard Guil say that in the video but I'm not sure. I read the W3C and MDN pages on JS' Element.style and nowhere does it say that setting it = ''; will reset the values to their initial properties. It seems like any other variable assignment wherein you are clearing out the contents by setting them to a blank/empty string.

Is there somewhere I missed in the documentation/reference material where it does state that setting them equal to an empty string will revert them to their initial values (as opposed to clearing their values entirely)?

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

It clears out any settings that were applied directly to the element. Any settings that were applied by CSS files or inherited will still be effective (or will become effective again if they were overridden by the element styles).

babasariffodeen
babasariffodeen
6,475 Points
babasariffodeen
babasariffodeen
6,475 Points

My version:

//checkboxes trigger a change event

filterCheckbox.addEventListener('change', () => {
    console.log('event fired!');
    const lis = ul.children;
    if(filterCheckbox.checked){
        console.log('CHECKED');
        //hide responded using className

        for(let i=0; i<lis.length; i++){
            if (lis[i].className == 'responded'){

                lis[i].style.display = "none";
            }
        }
    }else{
        console.log('UN-CHECKED');
        for(let i=0; i<lis.length; i++){
            if (lis[i].className == 'responded'){

                lis[i].style.display = "";
            }
        }
    }
});

Can someone please comment?

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

It looks like you changed the checkbox function. In the video it hides the reservations that have not responded, but this code would hide the ones that have responded.

Just make sure that you also change the checkbox label in the HTML so the new functionality will be clear to the user!

Boyan Anakiev
Boyan Anakiev
5,536 Points
Boyan Anakiev
Boyan Anakiev
5,536 Points

What Steven said is very accurate and made sense to me, to offer a different interpretation:

Styles can be loaded from many sources.

For example, in the HTML you could have a style applied to the element, then in the .css file you could have another style added to the same element that is overwritting it, then you could have multiple javascript files that are also appliying styles to the same element.

When you do lis[i].style.display = ""; in your javascript file, you're basically removing any styling to the display property that you had applied from that javascript file, however, this will not erase any style you have applied to the display property from your .css files, other javascript files or the html document itself, so this is why 'it works' in this case.

At first I was also confused since you'd think that it will completely overwrite the .display property with an empty string (which would not make sense as its not a valid value) from all sources but that's not how it works.

At least that's how I make sense of it, someone else mentioned that it will also clear inline styles in the html - that may also be the case, I have not tested it.

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

It does completely overwrite the "display" property of the element with an empty string. That cancels any inline styles and anything previously added from the script; and allows it to be styled by things of lower precedence, such as the contents of a CSS stylesheet.