TypeError: is null (External javascript)

Question

如何使此代码与外部 javascript 文件一起工作？

<!DOCTYPE html>
<html>
<body>

<h2>My First Page</h2>

<p id="demo"></p>

<script>
var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";
</script>

</body>
</html>

如果我尝试在 script.js 文件中写入它，它将 return 这个错误： "TypeError: elem is null"

OBS：我没问题运行这是内在的HTML，只是外在的部分让我着迷。

Answer 1

在关闭正文标记之前嵌入您的 javascript 文件，以便您的 javascript 文件在页面加载后运行s。否则你的代码将在演示元素添加到页面之前运行:

<script src="external.js"></script>

并且仅在外部文件中使用内联脚本的内部部分：

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

Answer 2

在 DOM 的末尾导入您的外部 javascript 文件。当您在 header 处调用 javascript 文件时，您的脚本会在加载之前搜索元素。这就是它给出错误的原因。立即尝试！

<!DOCTYPE html>
<html>
    <body>

        <h2>My First Page</h2>

        <p id="demo"></p>

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

Answer 3

如果您的脚本运行在 DOM 完成加载之前（特别是 #demo 元素尚未出现），您对 getElementById 的调用将 return空。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

因此，您需要确保 DOM 在查询该元素之前已加载。

您可以将脚本标记放在文档末尾（如本 post 中其他地方所建议），或利用 DOMContentLoaded 事件：

window.addEventListener('DOMContentLoaded', function() {
    var elem = document.getElementById("demo");
    elem.innerHTML = "Hello World!";
});

TypeError: is null (External javascript)

TypeError: is null (External javascript)

javascript

dom

innerhtml