Cannot understand the If statement

Hi there Luca! The former answers here are very solid but I think I may have found something in one of your comments that might suggest where you're getting tripped up. You posted this:

Display=none means that I have no text so there's nothing to hide!

Except the code snippet you're referring to is not setting the display to none, it's asking if the display is currently set to none by using the double equals ==. This is not an assignment this is more of a question. So let's see if I can break it down a bit with some comments and see if it helps.

if (listDiv.style.display == 'none') {   //is the display currently set to none?  If it is, then the list is hidden... let's change that
     toggleList.textContent = 'Hide list';  //first we assign "Hide list" as the text to print on the button
     listDiv.style.display = 'block';    //  Then we set the display to block which makes the list appear
}  // at this point the button will say "Hide list" and the list will be printed on the screen

The else statement works the same way, but in reverse. If the display is currently set to block (visible), then we will hide the list by setting the display to none and change the text on the button to "Show list".

Hope this clarifies things!

Hi Luca,

Maybe you're confused by the way the if/else statement was written. Logically, it's kind of backwards compared to what we see in the browser initially. Let me try and explain what's happening in a more visual way.

This is what loads initially (State 1):

HIDE LIST

• Item 1
• Item 2
• Item 3

Here, display="" (remember, this is referring to an inline style that has NOT been defined.)

When you click HIDE LIST, the if/else statement runs the code for else (because display="" is NOT the same as display="none"):

} else {
    toggleList.textContent = 'Show List';  // Change button text to Show List
    listDiv.style.display = 'none';  // HIDE the list by setting display to 'none'               
}

Now this is what you see in the browser (State 2):

SHOW LIST

Here, display="none" (we just did this with the else statement).

So when you click SHOW LIST, the if/else statement runs the first portion of the code (because display="none" now, remember?):

if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide List';  // Change button text to Hide List
    listDiv.style.display = 'block';  // SHOW list by setting display to 'block'
}

And this changes what you see back to State 1.

I hope this makes sense. :)

Hi Luca,

Sorry you're having confusion! It may help to think about what a button (any button) does. When a button is clicked, something on the page changes. To help the user know what change to expect when the button is clicked, the words on the button should describe what will happen. This means a button's text describes a state that does not currently exist. In the case of a toggle button, the button's text will describe the opposite state of what is on the page.

So in this example, if the list is hidden (i.e. its display property is set to 'none'), we want the button to say "Show list", to let the user know they can see the list if they click the button. When the "Show list" button is clicked, the if statement looks at the list's display property and sees it is 'none'.

if (listDiv.style.display == 'none') {

So it needs to run code that shows the list, which it does by setting the display property to 'block'.

listDiv.style.display = 'block';

Now that the list is visible, the button should tell the user they can hide the list if they click it. So while displaying the list, the code should also reverse the button text to "Hide list".

toggleList.textContent = 'Hide list';

Note that in the video, you can see that the code in the if statement is changing the button's text before hiding the list. It doesn't really matter which line goes first, since they both execute at the same time.

Thinking about opposites in coding is a common source of confusion, by the way, even for experienced developers!

Does this help?

I can see how this may seem peculiar at first.

Whatever the current state of the list is, this function is going to change it. But it will also change the words that appear on the button.

The button will show what is going to happen when you click on it, which will always be the opposite of what is happening now. So when the list is visible, the button will say "Hide List". And when the list is hidden, the button will say "Show List".

And when the display is currently "none", the list is hidden and to change that the display will be set to "block". Otherwise ("else") the display will be set to "none" to hide the list.

So, whatever the current state of the list, the function will make it be the opposite, and at the same time change the button to refer to what will happen the next time.

Does that clear it up?

The button is used to toggle the list from being visible to invisible and vice versa. If the list is invisible the button will make it visible and then change the button text to reflect the fact that if it is pressed again it will hide the list.

The else statement will fire if the list is visible and will hide it, and then update the button text to reflect the fact that pressing it again will show the list.

In other words the button text doesn't reflect the current action being taken, but the action that will occur if the button is pressed again.

If the actions were reversed then you would try to hide the list when it was already hidden, and show it when it is already visible, and the text on the button would state the opposite of what the button would actually be doing.

Sorry but still continue not to understand.

In the first condition

if (listDiv.style.display == 'none')  {
      toggleList.textContent = 'Hide list';
      listDiv.style.display = 'block';
}

the first point it asks if listDiv.style.display is none. If so then the button becomes 'Hide list' and it sets the display to block, isn't it? But if the display is none how can i hide the list if the list is hidden? Display=none means that I have no text so there's nothing to hide! Even from the table Steven posted I can see that when display is block the list is hidden and the button should be "Show list". This point is not so clear for me sorry!