我在将事件监听器添加到 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>
我不知道问题是什么,也不知道解决方案...有什么帮助吗?
最佳答案
您可能试图在 DOM 元素准备好之前访问它们。尝试将您的 Javascript 代码放入 DOMContentLoaded
监听器中:
document.addEventListener("DOMContentLoaded", function(event) {
// put your javascript code here
});
这将保证您的 Javascript 代码可以访问所有 DOM 元素。在 $(document).ready equivalent without jQuery 阅读更多内容
关于javascript - addEventListener 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52079678/