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 MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Styling elements

Here I got another small problem, In the video, the condition statement in 'if' sets to the style.display == 'none', to check whether the button to show the content or hide the content, but there is little things i cant figure out. The display property at first was not none, it was appear on the webpage, so I dont think this condition is true. Im confusing. Hope someone can help me, thank you so much!

3 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

I think you are confusing what the conditional is actually doing.

if(elem.style.display == 'none') {
     elem.style.display = 'block';
}
else {
     elem.style.display = 'none'
}

The elem.style.display == 'none' is checking whether the display property of the element is equal to 'none'. That's the whole point of the == it is doing a comparison. Because by default the display would not equal 'none' the else statement will run, and the element will have it's display set to none and thus hidden.

I recommend you go back and re-watch the videos on conditional statements if you are still confused.

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Sorry for the late reply. As you said, I am still confused. Because, the inside of the if parenthesis, is to check the element is true or false, but the display at first is not none, it s always block. So, how to check the condtion?

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Sorry for the late reply, really busy last weekend, didn't get any programming done.

Yes, you are still confused but don't let that keep you down, we were all there at some point.

I'd recommend going back to the javascript basics course, and rewatch the videos concerning conditionals, maybe take more notes or practice more with them. Now as for your confusion:

It is already performing the check, remember in an if-else block, if the if condition fails, the else runs. So in our case, we don't have to check about whether the element has a block display type because if the check for it being none passes, we assume it is block (or is at least being displayed and isn't a none type).

Basically, the if-else block is saying this:

If the element has a display type of none, set its display to block to show it. Otherwise, set the display type of the element to block to show it.

Hope that helps let me know if you need clarification.

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

So sorry, for the late reply again. I still dont understand whats happening and i do review the if else statement from the javascript basics course. But mostly, they chech the result is true, then run if statement. Since the condition is elem.style.display=='none', at the first display is appear to the webpage, so I still confusing, so sorry. Hope you can explain more detailed, thank you so much!

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Okay, let me try a metaphor.

Imagine for a moment that you own a car (you probably do) and every day you go to the car you try to open the door, if it's locked you unlock it, otherwise you open the door. Let's write that scenario in an understandable way:

If the car door is unlocked then open the door, otherwise unlock the door with your keys.

Now let's write that same scenario in code:

if(car.door == 'unlocked') {
   openDoor();
}
else {
   unlockDoor(key);
}

I want you to think about this. If the car door is locked what do you do? You unlock it, with your key right? This is the exact same scenario that we are going through with the display type of the element. If the display type does not equal none (the element is displayed) then the else statement will run instead, which will set the display type to none and hide the element.

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Thank you so much!! I almost there, still a little confused, but you help me a lot, thank you!!

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Already understand. Anyway, If i have other problem, i will ask you again. Thank you!

khokumdar akhmedov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
khokumdar akhmedov
Front End Web Development Techdegree Graduate 14,745 Points
khokumdar akhmedov
.a{fill-rule:evenodd;}techdegree seal-36
khokumdar akhmedov
Front End Web Development Techdegree Graduate 14,745 Points

Great discussion, it helped me understand it better.

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 👍