Question

我试图在按下按钮时执行警报（“单击”），但是我无法使它在Visual Studio代码上工作，它仅在Codepen上工作。我在Visual Studio代码中使用称为“在浏览器中打开”的扩展名来运行index.html。

我尝试将代码复制到Codepen并成功

<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");
});

我希望它显示为“已单击”，但是当我单击按钮时它什么也没做。

Answer 1

我认为您应该通过执行以下操作删除默认操作（重新加载页面）：

document.addEventListener('DOMContentLoaded', (event) => {
    var btn = document.querySelector("#btn");
    btn.addEventListener("click", function(e) {
      e.preventDefault()
      alert("clicked");
    });
  });

我不确定是否有帮助，请尝试一下

Answer 2

您的脚本可能在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>

addEventListener在代码笔上有效，但在Visual Studio代码上无效

2 个答案: