Question

未捕获的 TypeError：本地开发时无法设置 null 属性（设置‘innerHTML’）[重复]

2023-07-13

51

javascript html

我有以下 HTML 代码 -

<!DOCTYPE html>
<head>
    <title>Intro to Js</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"> </link>
    <script type="text/Javascript" src="scripts/index.js"></script>
</head>
<body>
    
    <h1>Introduction to Javascript</h1>
    <hr/>
    <div id="ResultContainer"></div>
    
</body>
</html>

以下是 javascript scripts/index.js

var resultContainer = document.getElementById("ResultContainer");
resultContainer.innerHTML = "Setting up environment";

以下是 css/style.css

body {
    margin-top: 20px;
    margin-left: 20px;
}

h1 {
    font-size: 50px;
}

#ResultContainer {
    font-size: 30px;
    margin-top: 30px;
    padding: 10px;
    width: 450 px;
    height: 200px;
    border: 1px solid black;
}

当我使用 start 命令运行代码时出现错误

Uncaught TypeError: resultContainer is null http://localhost:3000/scripts/index.js:6

但相同的代码在 codepen 运行良好。

有什么想法可以修复本地错误吗？

Answer 1

您的代码在 DOM 完全加载之前运行（元素不存在）。

要解决此问题，您可以将 script 放在 body 标签底部，或者使用 DOMContentLoaded 包装您的代码，这将确保您的代码仅在页面完全加载后执行：

window.addEventListener("DOMContentLoaded", (event) => {
  var resultContainer = document.getElementById("ResultContainer");
  resultContainer.innerHTML = "Setting up environment";
});

Answer 2

脚本标记不会进入标头，因为它无法读取 boyd 元素，请将其放入 body 标记中

<!DOCTYPE html>
<head>
    <title>Intro to Js</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"> </link>
</head>
<body>
    
    <h1>Introduction to Javascript</h1>
    <hr/>
    <div id="ResultContainer"></div>
    <script type="text/Javascript" src="scripts/index.js"></script>
</body>
</html>