javascript - addEventListener在代码笔上工作，但在Visual Studio代码上不工作

This question already has answers here:

Why does jQuery or a DOM method such as getElementById not find the element?

                                    （7个答案）


                                5个月前关闭。


我试图在按下按钮时执行alert（“ clicked”），但是我无法在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");
});

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

最佳答案

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>