我想在点击图像时收到提醒。我正在尝试按 id 选择元素。我尝试过 querySelector 和 getElementbyId。如果我将事件监听器设置为页面加载,则重新加载时会发出警报。 所以我确信我正确链接了该页面,但是当我尝试监听图像上的点击时,我做错了一些事情。
我尝试了 querySelector 和 getElementbyId。我已将脚本放在头部及其自己的文件中。我已将 id 放在图像标签上以及图像周围的 span 和 div 中。
document.addEventListener("DOMContentLoaded", function(event) {
alert("RELOAD");
});
let thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
alert("I saw you click!");
});
<div id="smart_thumbnail">
<img src="https://images.unsplash.com/photo-1454789548928-9efd52dc4031?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="earth" class="small">
</div>
浏览器控制台的错误是这样的:
TypeError: document.querySelector(...) is null
最佳答案
在访问 DOM 元素的值之前,您必须确保该元素已经存在。
如果您的脚本在 html 加载之前运行,您可以通过等待窗口首先完成加载来使其工作:
document.addEventListener("DOMContentLoaded", function(event) {
alert("RELOAD");
let thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
alert("I saw you click!");
});
});
关于javascript - 警报和监听点击事件时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57095886/