如何解决：“类型错误：无法读取 null 的属性 'addEventListener'”...？//答案

【问题标题】：how to fix : " TypeError: Cannot read property 'addEventListener' of null”…?//如何解决：“类型错误：无法读取 null 的属性 'addEventListener'”...？//
【发布时间】：2019-12-03 03:25:16
【问题描述】：

我正在通过视频教程学习 html/css/js。我正在学习如何编写 js 代码，但我无法帮助解决问题。我希望你们给我解决方案。问题是关于 add.EventListener。当我在 chrome 中运行代码时，在控制台中显示：“app.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null”我希望在您的帮助下解决这个问题。谢谢！

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>

【问题讨论】：

我在 codepen 中没有遇到这样的错误。单击<div id='p'> 时，它会正确记录"hey you clicked paper"。
@JossClassey 你的意思是添加另一个标签：
?
我不是字面意思。我只是在引用 id 为“p”的 div 元素。当我运行您的代码时，它按预期工作。检查一下：codepen.io/joss-c/pen/zgBqQP?editors=1010（我在控制台旁边添加了一个警报输出）。
我没有收到任何错误？
@JossClassey 在 vs 代码中运行良好但无法正常工作......

标签： javascript html addeventlistener

【解决方案1】：

发生这种情况是因为您在 <head> 标记中链接脚本，并且在加载 DOM 时首先加载脚本，然后在正文之后加载您的 html 内容。该脚本不知道您的 id 为“p”的元素。您必须在关闭 body 标签之前放置您的脚本，如下所示：

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

【讨论】：

我将脚本标签放在主布局页面的底部，并在其他页面（laravel）上扩展了主布局，但仍然发生

【解决方案2】：

以下是浏览器处理您的页面的方式：

下载所有 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()'>

这会等到主体加载后执行代码。

【讨论】：

【解决方案3】：

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

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

这意味着浏览器会尝试执行这条语句

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

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

【讨论】：

谢谢！我非常习惯在标题中添加脚本，我从来没有想过它的执行很重要，因为在这些元素存在之前它不能做某事！
您还可以使用“defer”属性来确保脚本“在页面完成解析时执行”。参考：w3schools.com/tags/att_script_defer.asp

【解决方案4】：

错误是您的 javascript 在加载 DOM 之前执行，因此 document.getElementById() 返回 undefined（如果您的 <script> 标记在文档 <head> 中，则会发生这种情况）

你可以：

将您的<script> 标签移动到文档末尾<body>，
或者您可以将 javascript 上下文包装在一个函数中，该函数在执行前侦听要加载的 DOM。

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

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

$(document).ready(function() { /* code here */ });

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

【讨论】：

谢谢你们！！你真的帮了我。我将

【解决方案5】：

你也可以在你的脚本标签中添加defer这个词

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

我也遇到过类似的情况。这可能是因为脚本是在页面加载之前执行的。通过将脚本放在页面底部，我绕过了这个问题。

【讨论】：

这在this one等其他答案中已经提到过。 在回答已有答案的旧问题时，请确保提供新颖的解决方案或比现有答案更好的解释。