开发者问题收集

如何修复：“TypeError：无法读取 null 的属性‘addEventListener’”…?//

2019-07-24
79696
javascript html addeventlistener

我正在通过视频教程学习 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>
3个回答

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

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

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

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

但会失败，因为相关元素稍后在 <body> 部分中定义。 尝试将 <script> 部分移动到 <body> 的末尾。

obscure
2019-07-24

浏览器处理页面的方式如下：

  1. 下载所有 HTML
  2. 浏览头部并下载 app.js
  3. 执行 app.js
  4. 从 html 构建 dom

我建议将脚本标记 

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

移至正文底部。然后，浏览器将在执行脚本之前确保所有 dom 都存在。

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

function init() {
    // your code
}

在正文中执行以下操作： 

<body onload='init()'>

它将等到正文加载完毕后再执行代码。

Dr_Derp
2019-07-24

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

<body>
...
<script src="app.js"></script>
</body>
Christian Carrillo
2019-07-24