Question

我正在从视频教程中学习html / css / js。我正在学习如何编写js代码，但我无助于解决问题。希望您能给我解决方案的人。问题是关于add.EventListener的。当我在chrome中运行代码时，在控制台中显示：“ app.js：11 Uncaught TypeError：无法读取null的'addEventListener'属性”，希望在您的帮助下解决此问题。谢谢！

const computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const p_div = document.getElementById("p");
const r_div = document.getElementById("r");
const s_div = document.getElementById("s");

p_div.addEventListener('click', function(){
    console.log("hey you clicked p")
})

这是javescript代码-下面是将看到任何错误的html代码...

<html>
    <head>
        <meta charset="utf-8">
        <title>Rock Paper Sicssors Game</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script type="text/javascript"  src="app.js" charset="utf-8"></script>
    </head>
    <body>
        <header>
            <h1>Rock Paper Sicssors</h1>
        </header>

        <div class="score-board">
            <div id="user-label" class="badge">user</div>
            <div id="computer-label" class="badge">comp</div>
            <span id="user-score">0</span>:<span id="computer-score">0</span>
        </div>

        <div class="result">
            <p>Paper covers rock. You win!</p>
        </div>

        <div class="choices">
            <div class="choice" id="p">
                <img src="game.image/paper-img.jpg" alt="image" height="42" width="42">
            </div>
        </div>
        <div class="choices">
                <div class="choice" id="r">
                    <img src="game.image/rock-img.jpg" alt="image" height="42" width="42">
                </div>
            </div>
        <div class="choices">
                    <div class="choice" id="s">
                        <img src="game.image/siccsors-img.jpg" alt="image" height="42" width="42">
                    </div>
                </div>


                <p1 id="action-message">Make your move.</p1>

     </body>
</html>

Answer 1

这是浏览器处理页面的方式：

下载所有HTML
从头开始下载app.js
执行app.js
从html构建dom

我建议您移动脚本标签

<script type="text/javascript"  src="app.js" charset="utf-8"></script>

到您的身体底部。然后浏览器将在执行脚本之前确保所有dom存在。

或者，您可以在脚本中执行此操作：

function init() {
    // your code
}

这在你体内：

<body onload='init()'>

这将等到加载主体以执行代码为止。

Answer 2

之所以会这样，是因为您要在<head>标签中链接脚本，并且在DOM加载时首先加载脚本，然后在正文中包含html内容。脚本不知道ID为“ p”的元素。您必须先放置脚本才能关闭body标签，如下所示：

<body>
...
<script src="app.js"></script>
</body>

Answer 3

发生这种情况是因为您将包含JavaScript的文件包含在html文件的<head>部分中。

<script type="text/javascript"  src="app.js" charset="utf-8"></script>

这意味着浏览器将尝试执行此语句

const p_div = document.getElementById("p");

，但不会这样做，因为稍后在<body>部分中定义了有问题的元素。尝试将<script>部分移到<body>的末尾。

Answer 4

错误是您的JavaScript在加载DOM之前已执行，因此document.getElementById()返回undefined（如果您的<script>标签位于文档{{1 }}）

您可以：

将<head>标记移至文档<script>的末尾，
，或者您可以将JavaScript上下文包装在一个函数中，该函数在执行之前侦听要加载的DOM。

<body>

如果您已经在使用jQuery（在这种情况下，因为您正在制作视频教程，则可能不会使用）：

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
  });
</script>

您可以在这篇文章中找到onload事件的更多示例： window.onload vs document.onload

Answer 5

您还可以在脚本标签中添加 defer 一词

<script type="text/javascript"  src="app.js" charset="utf-8" defer></script>

这意味着浏览器将加载您的Javascript文件，但在下载HTML之前不会执行它。

Answer 6

这也可以。您可以将脚本保留在标题中，只需在末尾输入“defer”即可。

<script type="text/javascript"  src="app.js" charset="utf-8" defer></script>

如何解决：“ TypeError：无法读取null的属性'addEventListener'”…//

6 个答案: