javascript - 了解 html 中外部 .js 文件的 "order matters"

Question

编辑:

好吧，我会尝试使用尽可能少的代码来解释我的问题。

我有一个选择下拉菜单，其中绑定(bind)了一个函数changetext()。每当在下拉菜单中选择一个值时，标签内的文本就会更改。

该函数的脚本存储在外部 js 文件中，并放置在我的 html 文件的底部。

js文件里面是这样的。

var selectormenu = document.getElementById("selector");
var spanTag = document.getElementById("texthere");

function changetext(){
    if(selectormenu.value == "one"){
        spanTag.innerHTML = "one";
    }
}

通过使用此 js 文件，我在浏览器控制台中收到 TypeError。但是，如果我将 var selectormenu 和 spanTag 放置在函数内，则脚本可以正常工作。

Answer 1

编辑:由于问题大小写敏感性已修复，我正在调整我的答案。您需要已创建 DOM 元素，因为 document.getElementById 需要选择一些内容。然后，您的函数需要在括号之前命名。最后，您需要调用该函数，因为除非调用它，否则它不会运行。

<div id="divid>Hello World!</div>
<script>
var soandso = document.getElementById("divid");

function statsChange() {
    soandso.innerHTML = "123";
} 
statsChange();
</script>