javascript - 从外部 javascript 文件获取ElementById

Question

我在单独的 javascript 文件中有以下代码。

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var oneText = document.getElementById("oneText");
var twoText = document.getElementById("twoText");
var threeText = document.getElementById("threeText");
var fourText = document.getElementById("fourText");
var fiveText = document.getElementById("fiveText");

function buttonClicked() {
console.log('Hello!');
}

javascript 文件使用链接到我的 HTML 文件中。

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

我在 HTML 文件中放置了一个按钮，并调用了 buttonClicked 的 onclick，我已经对其进行了测试，当按下该按钮时，它会返回“Hello!”在 javascript 控制台中(正如我所希望的那样)，但是当我尝试更改 HTML 元素上的其中一个元素时，我收到一条错误消息。

TypeError: one is null 

我现在想知道是否应该使用一些 import 语句或者是否应该使用内联 javascript。

干杯

Answer 1

您应该在具有 one id 的 HTML 标记下方添加 SCRIPT 标记，以引入 main.js。您可以将其视为浏览器按顺序将 HTML 转换为 DOM。这包括加载引用 DOM 的 JavaScript。如果您将 SCRIPT 标记放入 header 中，它将在该时间点的 DOM 上下文中进行解析和执行(可能不会包含带有 one 的元素) > 身份证)。通过将 JavaScript 文件包含在页面底部，您可以避免执行类似 jQuery $(documnt).ready(...) 之类的操作 - 相反，您可以强制执行当 HTML 转换为 DOM 时发生。