JavaScript JavaScript and the DOM Making Changes to the DOM Styling Elements

MIHA WANG
MIHA WANG
Front End Web Development Techdegree Student 10,820 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!

2 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 9,734 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 WANG
MIHA WANG
Front End Web Development Techdegree Student 10,820 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 9,734 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 WANG
MIHA WANG
Front End Web Development Techdegree Student 10,820 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 9,734 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 WANG
MIHA WANG
Front End Web Development Techdegree Student 10,820 Points

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

MIHA WANG
MIHA WANG
Front End Web Development Techdegree Student 10,820 Points

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