javascript - javascript 事件处理程序的问题

Question

我希望这不会被标记为“重复”，因为我已经查看了多个线程并遵循了我发现的建议。我知道我遗漏了一些简单的东西，需要其他人关注这一点。我是新手，所以请多多包涵。我正在测试一个简单的按钮元素，我有一个点击事件处理程序，但它不工作。它与“onclick”内联工作，但我试图避免这种情况。简单的 html:

<div>
    <button id='handler'>Event</button>
</div>
<div id='stringText'>
    <h4>Some Description</h4>
    <p>
        Some more information
    </p>
</div>

和 javascript:

<script>
    document.getElementById("handler").addEventListener("click", display, true);
    function display() {

        if (document.getElementById("stringText").style.display === "block") {
            document.getElementById("stringText").style.display = "none";
        } else {
            document.getElementById("stringText").style.display = "block";
        }

    };

</script>

我有最初将“stringText”显示设置为“无”的 css。感谢任何帮助。

Answer 1

• 您的问题可能与加载文档时执行该脚本有关。
• 添加此条件 stringText.style.display === "" 以正确显示/隐藏元素。

另一种方法是使用事件 DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  document.getElementById("handler").addEventListener("click", display, true);

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

<div>
  <button id='handler'>Event</button>
</div>
<div id='stringText'>
  <h4>Some Description</h4>
  <p>
    Some more information
  </p>
</div>