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文件中写这个，它将返回此错误： “TypeError：elem为null”

OBS：作为内部HTML，我没有遇到任何问题，只是外部部分正在抓住我。

Answer 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!";
});

Answer 2

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

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

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

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

Answer 3

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

<!DOCTYPE html>
<html>
    <body>

        <h2>My First Page</h2>

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

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

TypeError：为null（外部javascript）

3 个答案: