Question

无法读取 null 的属性“getElementById”

2020-01-17

1833

javascript html

我正在使用 HTML 和 JS 编写一个简单的 Cat Clicker 应用程序，但是此代码一直出现“无法读取 null 的属性‘getElementById’”错误。

这有什么问题？

<!DOCTYPE html>
<html>
  <head>
    <title>Cat Clicker</title>
    <script>
      'use strict'
      var cat = document.getElementById("cat");
      var counter = document.getElementById("counter");
      var meter = 0;
      function incClick() {
        meter++;
        counter.innerHTML = meter;
      };

      cat.addEventListener('click', incClick);
    </script>
  </head>
  <body>
    <p id="counter" >0</p>
    <img id="cat" src="img/cat1.jpg" alt="cat">
  </body>
</html>

Answer 1

我已纠正以下几个问题。您需要使用 document 而不是 document.body 。您需要确保 dom 已完成加载，因此我添加了内容已加载事件监听器。

<!DOCTYPE html>
<html>
  <head>
    <title>Cat Clicker</title>
    <script>
      'use strict'
      document.addEventListener("DOMContentLoaded", function() {
        var cat = document.getElementById("cat");
        var counter = document.getElementById("counter");
        var meter = 0;
        function incClick() {
          meter++;
          counter.innerHTML = meter;
        };

        cat.addEventListener('click', incClick);
      });
    </script>
  </head>
  <body>
    <p id="counter" >0</p>
    <h1 id="cat" src="img/cat1.jpg" alt="cat"></h1>
  </body>
</html>

Answer 2

您需要在 HTML DOC 正文之后或至少在 HTML 内容的最后添加 <script> 标签。

这是因为 DOM 的运作方式。它会按顺序加载所有内容，因此您的脚本会尝试定位 DOM 中尚不存在的元素

Answer 3

只需将您的 script 标签放在 body 标签之后，因为我认为问题在于 DOM 在脚本运行后呈现。

您还可以使用 document.getElementById 而不是 document.body.getElementById