Why my show hide button needs double-click on first time

Question

I have this show/hide button on my website. It works, but on the first time the user needs to double-click it as if the switch is set to "hide" but the element is already hidden...

I'd like to edit my code so the button shows the element with a single click on the first time

I'm new to javascript, so I don't know how to change this.

Thank you

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}

<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

Things like these are the reason why you should _not_ check CSS properties directly. This is even more difficult to get right with color values. Instead, a CSS class should be used, e.g. `#menu.hidden { display: none; }`; then [`x.classList.has("hidden")`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Methods) should be checked. Or simply use the [`hidden` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden). — Sebastian Simon, Jan 25 '21 at 21:08

score 4 · Accepted Answer · answered Mar 08 '19 at 22:18

To achieve expected result, use below option of checking display initially which will be empty if it is not inline

x.style.display === "none" || x.style.display === ""

Please refer this link for more details - Why element.style always return empty while providing styles in CSS?

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}

<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

Maheer Ali · Answer 2 · 2019-03-08T22:34:35.250

Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.

function showhidemenu() {
  var x = document.getElementById("menu");
  x.style.display = !x.style.display ? 'block' : '';
}

#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}

<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

The code works because '' is falsy value

score -1 · Answer 3 · answered Mar 08 '19 at 22:11

You need to check your "if/then" statement. You are checking the wrong order.

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}

<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

Why my show hide button needs double-click on first time

3 Answers3

Linked

Related