Why the first click on the button doesn't work?

Question

jsfiddle.net/coder344/13nmx5kj/1/ When I click on the button it doesn't work properly (with display:block)

Answer 1

Because your click is going under else part.

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. The element uses display: none; as default. You can achieve the desired out put by putting none under "" in your style sheet.

Refer the fiddle.

function myFunction() {
let x = document.getElementById("div");
if (x.style.display === "none") {
alert(1);
    x.style.display = "block";
}
  else {
  alert(2);
      x.style.display = "none";
  }
}

#div {
  display: none;
}

<button onclick = "myFunction()">Click Me</button>
<div id="div">some text here</div>