Javascript addEventListener无法正常工作

我在JS中添加事件监听器时遇到问题…如果我用onclick属性连接按钮，它会工作，但如果我在HTML中删除它并尝试添加事件监听器（“单击”，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>

JAVASCRIPT
document.getElementById（“btn”）.addEventListener（'click'，myFunction）；
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i
-5贾贾
-0.2升mleka
-100克俚语
-200克巴西纳
-10g普特拉
-50g西拉
五分钟内就可以完成一次工作

---

我不知道问题和解决方案是什么……有什么帮助吗？

您可能正在尝试在DOM元素准备好之前访问它们。尝试将Javascript代码放在

DOMContentLoaded

侦听器中：

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

---

这将保证Javascript代码能够访问所有DOM元素。在

上阅读更多内容，我认为问题在于您并没有等待页面完全加载。使用jQuery确保页面已加载

然后在上使用jQuery

，对于
单击
事件

$(document).ready(function(){

$("#btn").on('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');
      }
    }
  }
}

});

$（文档）.ready（函数（）{
$（“#btn”）。在（'click'，myFunction'）；
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i
您必须等待页面加载。但您不需要jQuery，您可以将js代码封装在一个自执行函数中，如下所示：

(function(){
    // your code
}())

一年多过去了，但对某些人来说还是有用的：

在服务器迁移到AWS后，我的javascript ajax请求停止工作

经过几个小时的努力找出问题所在，我意识到我正在使用

window.addEventListener("DOMContentLoaded", function(event) { ...}

而不是

document.addEventListener("DOMContentLoaded", function(event) { ...}

当我一改为“document.”时，对我的服务的每个ajax请求都得到了正确的响应

我不是javascript开发人员，也许正因为如此，这对我来说是一场噩梦

希望它有帮助
如果你像这里那样直接注入函数，它能工作吗？你的
标记在HTML中的什么地方？很难说，因为你的示例不完整，但通常的建议是，你可能在元素存在之前绑定事件，在运行脚本之前，请使用document ready事件等待html加载。我的脚本标记的可能副本位于头部，它与名为togglebtn.js的单独文档连接