来自外部javascript文件的getElementById

getElementById from an external javascript file

本文关键字：getElementById 文件 javascript 外部      更新时间：2023-09-26

我在一个单独的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文件中放了一个按钮，它的onclick调用为buttonClicked，我已经测试过了，当按下按钮时，它会返回"Hello！"在javascript控制台中（正如我所希望的那样），但当我试图更改HTML元素上的一个元素时，我收到一个错误消息。

TypeError: one is null

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

干杯

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

另一种方法是将所有代码放在window.onload函数中，如下所示：

window.onload = function() {
    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!');
    }
}
相关文章：