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文件中放了一个按钮，点击按钮点击，我测试了它，当按下按钮时，它返回'Hello！'在javascript控制台中（正如我希望的那样）但是当我尝试更改HTML元素中的一个元素时，我得到一个错误说法。

TypeError: one is null

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

干杯

Answer 1

您应该添加SCRIPT标记，该main.js标记位于one内容为SCRIPT的HTML标记下方。您可以将其视为浏览器按顺序将HTML转换为DOM。这包括加载引用DOM的JavaScript。如果将one标记放在标题中，它将在该时间点在DOM的上下文中进行解析和执行（可能没有$(documnt).ready(...) id的元素）。通过将JavaScript文件包含在页面底部，您可以避免需要执行类似jQuery {{1}}的操作 - 而是在HTML转换为DOM时强制执行。

Answer 2

另一种方法是将所有代码放入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!');
    }
}

来自外部javascript文件的getElementById

2 个答案: