来自外部javascript文件的getElementById

我在一个单独的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>

我现在想知道我是应该使用一些import语句，还是应该使用内联javascript

---

干杯

您应该在具有

一个

id的HTML标记下面添加

脚本

标记，该标记拉入

main.js

。您可以将其视为浏览器按顺序将HTML转换为DOM。这包括加载引用DOM的JavaScript。如果将

SCRIPT

标记放在标头中，它将在该时间点在DOM的上下文中被解析和执行（该时间点很可能没有

one

id的元素）。通过将JavaScript文件包含在页面底部，您无需执行jQuery

$（documnt）.ready（…）

——相反，您可以在HTML转换为DOM时强制执行。

另一种方法是将所有代码放在

窗口中。onload

函数，像这样：

window.onload=function（）{
var one=document.getElementById（“one”）；
var two=document.getElementById（“two”）；
var三=document.getElementById（“三”）；
var four=document.getElementById（“four”）；
var five=document.getElementById（“五”）；
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”）；
函数按钮单击（）{
console.log（'Hello！'）；
}
}

在页面末尾添加

HTML或Javascript文件？将其放在HTML中的

之前。在HTML文件上尝试，成功，thx太多了…或者将您的代码放入事件句柄这里没有

jQuery

tag@hindmost我知道——我是在大多数JavaScript开发人员都熟悉的

jQuery.ready

的上下文中解释它的。

TypeError: one is null