Uncaught TypeError: Cannot read property 'clientHeight' of null Chrome 2020

Question

这似乎是一个非常简单的问题，但我就是想不通。在 Chrome 的控制台日志中，我不断收到：

Uncaught TypeError: Cannot read property 'clientHeight' of null

这是我的 HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js"></script>
</head>
<body>
    <div id="deets">
        <h1>Document</h1>
        <p>Lorem ipsum...</p>
    </div>
    <canvas id="anim"></canvas>
</body>
</html>

这是我的 JS 代码：

// 1. test main.js is linked to index.html
console.log('it works!!');

// 2. test #document code is available
console.log(document);

// 3. test .getElementById("deets") and get .clientHeight
console.log(document.getElementById("deets").clientHeight);

第一个和第二个测试有效，但我不知道第三个有什么问题。元素 id="deets" 一直返回 null。

非常感谢任何帮助。谢谢！

Answer 1

尝试一下：

考虑将 <script src="js/main.js"></script> 移到 </body>?

这是因为我们在呈现 DOM 个元素之前调用 document.getElementById("deets")。

如果我们需要在头部调用<script src="js/main.js"></script>，可以考虑使用onload event.

Answer 2

将您的 js/main.js 文件放在正文部分末尾的脚本标签中，它应该可以工作。

Answer 3

这可能对您有所帮助。您应该将 script 标签移动到 body 标签的底部。

  <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
     <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div id="deets">
        <h1>Document</h1>
        <p>Lorem ipsum...</p>
        </div>
        <canvas id="anim"></canvas>
        <script src="js/main.js"></script>
    </body>
   </html>

Uncaught TypeError: Cannot read property 'clientHeight' of null Chrome 2020

Uncaught TypeError: Cannot read property 'clientHeight' of null Chrome 2020

html

javascript

getelementbyid