addEventListener在代码笔上工作，但不在visual studio代码上工作。
addEventListener在代码笔上工作，但不在visual studio代码上工作。
提问于 2019-08-25 12:24:53
当一个按钮被按下时，我试图做警告(“点击”)，但是我无法让它在visual代码上工作，它只在代码上工作。我使用一个名为“在浏览器中打开”的扩展在visual代码中运行index.html。
我试着复制代码来编码，结果成功了。
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Random dog Pictures</h1>
<img id = "photo" src = "https://i.pinimg.com/originals/68/6d/6f/686d6fc9d01def6b6f63acded53479bc.jpg" alt = "">
<button id = "btn">Get Random Dog Photo!!!</button>
</div>
<script src="randomDogPicture.js"></script>
</body>
</html>var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
alert("clicked");
});我以为它会显示“点击”，但当我点击按钮时，它不会做任何事情。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-25 12:37:12
在DOM完全加载之前，您的脚本可能正在运行。您可以将代码放在正文的底部，也可以用DOMContentLoaded包装代码。
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
alert("clicked");
});
});
</script>
<div class="container">
<h1>Random dog Pictures</h1>
<img id = "photo" src = "https://i.pinimg.com/originals/68/6d/6f/686d6fc9d01def6b6f63acded53479bc.jpg" alt = "">
<button id = "btn">Get Random Dog Photo!!!</button>
</div>
Stack Overflow用户
发布于 2019-08-25 12:59:36
我认为您应该通过这样做来删除默认操作(重新加载页面)：
document.addEventListener('DOMContentLoaded', (event) => {
var btn = document.querySelector("#btn");
btn.addEventListener("click", function(e) {
e.preventDefault()
alert("clicked");
});
});我不确定这是否有帮助，但试试看
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57645980
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号