addEventListener 没有正常工作

Question

我在向 JS 添加事件侦听器时遇到问题...如果我使用 onclick 属性连接按钮，它可以工作，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunction)，它就不起作用。顺便说一句，它是一个简单的下拉按钮。

在按钮的以下示例中，我删除了 onclick="myFunction" 并添加了此 - >

JavaScript：

document.getElementById("btn").addEventListener('click', myFunction);

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
 

HTML：

<button id="btn" class="dropbtn">RECEPT</button>
<div id="myDropdown" class="dropdown-content">
  <ul>
    <li>-5 jaja</li>
    <li>-0.2l mleka</li>
    <li>-100g slanine</li>
    <li>-200g brasna</li>
    <li>-10g putera</li>
    <li>-50g sira</li>
    <p class="recipeInfo">Kuvati na laganoj vatri i ostaviti da se krcka 5 minuta</p>
  </ul>
</div>

我不知道问题是什么，也不知道解决方案......有什么帮助吗？

Answer 1

您可能试图在 DOM 元素准备好之前访问它们。尝试将 Javascript 代码放入DOMContentLoaded侦听器中：

document.addEventListener("DOMContentLoaded", function(event) { 
    // put your javascript code here
});

这将保证您的 Javascript 代码可以访问所有 DOM 元素。阅读更多内容$(document).ready 相当于没有 jQuery