初始化外部function时variables不可访问

当我使用这样的代码时,它工作正常:

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

但是,当我然后想要将systemStatus移动到一个全局variables,它不起作用:

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

我应该在这里做什么?

这真的取决于你的JavaScript代码的位置。

这个问题可能是由于DOM没有被加载的时候造成的

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

被执行。 你可以尝试在一个onload事件中调用它,或者理想地使用JavaScript框架中的一个DOM readytypes的事件。

确保你在任何代码块之外的“根”级上声明variables。

你也可以完全删除var ,虽然这不被推荐,并会抛出一个“严格”的警告。

根据MDC文档 ,您可以使用window.variablename来设置全局variables。

我的猜测是在运行variables声明之后声明system-status元素。 因此,在variables被声明的时候,它实际上被设置为null?

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

你也可以尝试把脚本放在页面的底部(或者至less在声明了system-status元素之后的某个地方),但是不能保证总能正常工作。

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

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

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

这篇文章是对这样的问题的答案! ;)仔细阅读!

全局variables最好用外部JavaScript文件表示:

 var system_status; 

确保这个地方没有被使用过。 然后访问你的页面上的variables,只是参考它。 比方说,你想在文本框中填写结果,

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

为了确保该对象存在,请使用jQuery的文档准备function。

例:

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

要定义一个基于DOM元素的全局variables,必须检查一些事情。 首先,如果代码位于<head>部分,那么DOM不会在执行时加载。 在这种情况下,必须放置一个事件处理程序,以便在加载DOM之后设置variables,如下所示:

 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渲染。