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

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完全删除,虽然不建议这样做,并会发出"严格"警告.

根据MDC的文档,您可以使用设置全局变量window.variablename.

Answer 3

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

你应该只声明它,然后从onLoad处理程序中分配它的值,因为那样你就可以确定它已经正确初始化(加载)了有问题的元素.

您也可以尝试将脚本放在页面底部(或者至少在system-status声明元素后的某个位置),但不能保证始终有效.

Answer 4

在外部作用域中声明systemStatus并在onload处理程序中指定它.

systemStatus = null;

function onloadHandler(evt) {
    systemStatus = document.getElementById("....");
}

或者,如果您不想使用onload处理程序,请将脚本标记放在HTML的底部.