javascript 事件处理程序的问题

Question

我希望这不会被标记为 "duplicate"，因为我已经查看了几个线程并遵循了我找到的建议。我知道我遗漏了一些简单的东西，需要其他人关注这一点。我是新手，所以请多多包涵。我正在测试一个简单的按钮元素，我有一个点击事件处理程序，但它不工作。它与 "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>

我的 css 最初将 "stringText" 显示设置为 "none"。感谢任何帮助。

Answer 1

如果您确定并设置初始显示属性以阻止它工作正常。作为替代方案，您也可以尝试使用 jQuery，就像我在代码片段中所做的那样。

//with jquery

$(document).ready(function() {
  $('#handler').on('click', function() {
    $('#stringText').toggleClass('hide');
  })
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id='handler'>Event</button>
</div>
<div id='stringText'>
  <h4>Some Description</h4>
  <p>
    Some more information
  </p>
</div>

Answer 2

您的问题可能与加载文档时执行该脚本有关。
将此条件 stringText.style.display === "" 正确添加到 show/hide 元素。

另一种方法是使用事件 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>

Answer 3

使用 window.onload 事件

加载页面时请允许一些延迟

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

<script>
window.onload = function(){
 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>

javascript 事件处理程序的问题

Problems with javascript event handler

javascript

eventhandler