为什么此addEventListener（'click'，function）需要两次单击而不是一次单击？

Question

我有一个div，css样式display: none应用于该div。我想要实现的是一键将其更改为display: block。现在，我不知道为什么，但是需要单击两次。下面是它的Javascript：

    var block = document.getElementById('block');
    function switchBlock() {
    block.style.display == "none" ? block.style.display = "block" : block.style.display = "none";
}
    block.addEventListener('click', switchBlock);

Answer 1

您没有在代码中使用相同的var名称，也不了解事件在第二次单击时如何工作

编辑：这是因为element.style！=计算出的样式。

var block = document.getElementById('block');
var switcher = document.getElementById('switcher');

function switchBlock() {
  window.getComputedStyle(block).getPropertyValue('display') == "none" ? block.style.display = "block" : block.style.display = "none";
}

switcher.addEventListener('click', switchBlock);

#block {
  display: none;
}

<button id="switcher">click-me</button>
<div id="block">
<span>some text</span>
</div>