TypeError：为空（外部 javascript）答案

【问题标题】：TypeError: is null (External javascript)TypeError：为空（外部 javascript）
【发布时间】：2018-05-18 20:56:28
【问题描述】：

如何使这段代码与外部 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 文件中编写它，它将返回此错误： “类型错误：elem 为空”

OBS：我将其作为内部 HTML 运行没有问题，只是外部部分正在吸引我。

【问题讨论】：

在</body>标签之前加载你的脚本文件
Why does jQuery or a DOM method such as getElementById not find the element?的可能重复
$(document).ready equivalent without jQuery的可能重复
什么是“OBS”？ Google 告诉我的只是 Open Broadcaster Software。
下次当您提出问题时，请发布无效的版本，而不是有效的版本。在这种情况下，很容易猜出问题可能是什么，但情况并非总是如此，如果没有看到非工作版本，您永远无法确定。

标签： javascript dom innerhtml

【解决方案1】：

如果您的脚本在 DOM 完成加载之前运行（特别是 #demo 元素尚不存在），您对 getElementById 的调用将返回 null。

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

你的答案可以通过解释为什么来改进。

【解决方案3】：

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

<!DOCTYPE html>
<html>
    <body>

        <h2>My First Page</h2>

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

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

【讨论】：