如何使覆盖在单击前保持隐藏状态

<div id="overlay"></div>
<button id="clickButton">点击按钮</button>

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

var overlay = document.getElementById("overlay");
var clickButton = document.getElementById("clickButton");

clickButton.addEventListener("click", function() {
  if (overlay.style.display === "none") {
    overlay.style.display = "block";
  } else {
    overlay.style.display = "none";
  }
});