Javascript Conditional Statement Fails

Question

I'm trying to toggle the display on an element, and whilst I have used the conditional statement using below of '===' on say an ID of an element, which worked, I cannot get this code to work.

Does anyone know why the condition 'if (smallnavbar[0].style.display === 'none')' doesn't work? Is there a way to make the code work (toggle the display between none and flex)?

Thanks in advance!

function displayMenu(){
  var smallnavbar = document.getElementsByClassName("small-navbar-tabs");
  if (smallnavbar[0].style.display === 'none') {
    smallnavbar[0].style.display = 'flex';
  }
  else if (smallnavbar[0].style.display === 'flex') {
    smallnavbar[0].style.display = 'none';
  }
}

use == instead of ===. === doesn't do any type conversion. — Jithin Pavithran
– Jithin Pavithran, Commented Nov 15, 2017 at 18:00
Have you tried debugging? Put a line break at the beginning of the function and step through. See what is being saved in smallnavbar, that should shed some light on the situation. — nurdyguy
– nurdyguy, Commented Nov 15, 2017 at 18:01
Do the elements actually have the display property set, inline on the element? If they are only set in CSS, this code won't work. You would need to get the computed CSS. — skyline3000
– skyline3000, Commented Nov 15, 2017 at 18:02

ZER0 · Accepted Answer · 2017-11-15 18:21:33Z

2

style.display is referring to the inline style (<div style='display:block'></div>). If the display is set by a class in a stylesheet, the display value will be an empty string.

In such case, neither conditions will be true, and therefore it will seems to you that are "failing".

You can simply double check my hypothesis with a console.log before the if statement (of course assuming the displayMenu is called).

There are several workaround for fixing this. You can:

Check the computed style of the element instead of the inline one:

function displayMenu(){
  var smallnavbar = document.getElementsByClassName("small-navbar-tabs");
  var display = window.getComputedStyle(smallnavbar[0], "").display;

  smallnavbar[0].style.display = display === 'none' ? 'flex' : 'none';
}

}

Having a separate class name for "flex" and "none" and check that instead of the value (if the browser support or you provide a shim for classList that would be easy:
```
smallnavbar[0].classList.toggle("flexible"); 
```

Assuming the default value – e.g. you know that all small-navbar-tabs by default have display:none for example, therefore you could have:

if (smallnavbar[0].style.display === "flex") {
  smallnavbar[0].style.display = ""; // remove the inline style
} else {
  // since we're adding the inline style here,
  // it would pass the first check in the future.
  smallnavbar[0].style.display = "flex";
}

answered Nov 15, 2017 at 18:21

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheLemonSong Over a year ago

Hey @ZERO . Thanks for your very complete answer! Thanks for the multitude of workarounds, really interesting to see different pathways to effecting a solution. I'm not entirely sure I understand everything you've explained (my JS knowledge is still quite basic, but I'm improving), but the second workaround looks the nicest, will have to do a bit more research. Tried the first and it does the job, will look at 'classList'. Thanks again, really appreciate you time:)) Have a great weekend!

Collectives™ on Stack Overflow

Javascript Conditional Statement Fails

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related