在函数外部初始化时无法访问变量

Question

当我使用这样的代码时，它工作得很好：

function removeWarning() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "Invalid username";
}

但是，当我想要将systemStatus移动到全局变量时，它不起作用：

var systemStatus = document.getElementById("system-status");

function removeWarning() {
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    systemStatus.innerHTML = "Invalid username";
}

我应该在这里做什么？

Answer 1

这实际上取决于您的JavaScript代码所在的位置。

该问题可能是由于在执行以下操作时未加载DOM造成的

var systemStatus = document.getElementById("system-status");

将被执行。您可以尝试在onload事件中调用它，或者理想情况下使用JavaScript框架中的DOM ready类型事件。

Answer 2

确保在"root“级别声明变量，而不是在任何代码块之外。

您也可以完全删除var，尽管这是，并且会抛出"strict“警告。

根据，您可以使用window.variablename设置全局变量。

Answer 3

我猜测system-status元素是在运行变量声明之后声明的。因此，在声明变量时，它实际上被设置为null？

您应该只声明它，然后从onLoad处理程序中分配它的值，因为这样就可以确保它正确地初始化(加载)了相关的元素。

您也可以尝试将脚本放在页面的底部(或者至少在声明了system-status元素之后的某个位置)，但这并不能保证总是有效。