在函数外部初始化时变量不可访问答案

【问题标题】：Variable not accessible when initialized outside function在函数外部初始化时变量不可访问
【发布时间】：2010-02-18 18:47:20
【问题描述】：

当我使用这样的代码时，它工作正常：

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";
}

我应该在这里做什么？

【问题讨论】：

我的猜测是你的script 标签在页面顶部，所以当它执行时，document.getElementById("system-status") 返回null，因为它还不存在，因为 DOM 正在解析...

标签： javascript global-variables

【解决方案1】：

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

问题可能是行时没有加载DOM造成的

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

被执行。您可以尝试在 onload 事件中调用它，或者最好使用 JavaScript 框架中的 DOM 就绪类型事件。

【讨论】：

+1 这可能是您的问题。您的语法（无论如何都是孤立的）应该可以正常工作。
将脚本放在 html 的末尾也可能有效，但这绝对不是最性感的解决方案 :)
有时我不了解 SO 社区：我说问题是我提出的答案中的竞争条件，但它被否决了......现在我看到接受的响应实际上是“竞争条件”...

【解决方案2】：

确保在任何代码块之外的“根”级别声明变量。

您也可以完全删除 var，尽管那是 not recommended 并且会引发“严格”警告。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

在外部范围内声明 systemStatus 并在 onload 处理程序中分配它。

systemStatus = null;

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

或者，如果您不想要 onload 处理程序，请将您的脚本标记放在 HTML 的底部。

【讨论】：

【解决方案5】：

全局变量最好在外部 JavaScript 文件中表达：

var system_status;

确保它没有在其他任何地方使用过。然后要访问页面上的变量，只需照此引用即可。比如说，你想在一个文本框中填写结果，

document.getElementById("textbox1").value = system_status;

要确保对象存在，请使用 jQuery 的文档就绪功能。

例子：

$(function() {
    $("#textbox1")[0].value = system_status;
});

【讨论】：

连字符不是变量名中的合法字符。 JavaScript 引擎将查找两个变量，system 和 status，并尝试返回差异，因为在处理二元运算符时空格并不重要（即：5 - 3 与 5-3 相同）。

【解决方案6】：

要定义一个基于 DOM 元素的全局变量，必须检查几件事。首先，如果代码在<head> 部分中，则执行时不会加载 DOM。在这种情况下，必须放置一个事件处理程序以便在 DOM 加载后设置变量，如下所示：

var systemStatus;
window.onload = function(){ systemStatus = document.getElementById("system_status"); };

但是，如果该脚本在 DOM 加载时内联在页面中，那么只要相关 DOM 元素已加载到脚本所在位置的上方，就可以完成此操作。这是因为 javascript 是同步执行的。这将是有效的：

<div id="system_status"></div>
<script type="text/javascript">
 var systemStatus = document.getElementById("system_status");
</script>

作为后一个示例的结果，大多数在正文中运行脚本的页面将它们保存到文档的最后。这将允许页面加载，然后执行 javascript，这在大多数情况下会导致 DOM 的视觉呈现速度更快。

【讨论】：