Variable not accessible when initialized outside function

Question

When I use code like this  it works fine   function removeWarning         var systemStatus   document getElementById  system-status        systemStatus innerHTML          function indicateInvalidUsername         var systemStatus   document getElementById  system-status        systemStatus innerHTML    Invalid username       However  when I then want to move the systemStatus to be a global variable  it doesn t work   var systemStatus   document getElementById  system-status     function removeWarning         systemStatus innerHTML          function indicateInvalidUsername         systemStatus innerHTML    Invalid username       What am I supposed to be doing here

User · Answer

It really depends on where your JavaScript code is located.

The problem is probably caused by the DOM not being loaded when the line

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

is executed. You could try calling this in an onload event, or ideally use a DOM ready type event from a JavaScript framework.

User · Answer

To define a global variable which is based off a DOM element a few things must be checked  First  if the code is in the  lt head gt  section  then the DOM will not loaded on execution  In this case  an event handler must be placed in order to set the variable after the DOM has been loaded  like this   var systemStatus  window onload   function    systemStatus   document getElementById  system status         However  if this script is inline in the page as the DOM loads  then it can be done as long as the DOM element in question has loaded above where the script is located  This is because javascript executes synchronously  This would be valid    lt div id  system status  gt  lt  div gt   lt script type  text javascript  gt   var systemStatus   document getElementById  system status     lt  script gt    As a result of the latter example  most pages which run scripts in the body save them until the very end of the document  This will allow the page to load  and then the javascript to execute which in most cases causes a visually faster rendering of the DOM

User · Answer

Make sure you declare the variable on  root  level  outside any code blocks   You could also remove the var altogether  although that is not recommended and will throw a  strict  warning   According to the documentation at MDC  you can set global variables using window variablename

User · Answer

My guess is that the system-status element is declared after the variable declaration is run  Thus  at the time the variable is declared  it is actually being set to null   You should declare it only  then assign its value from an onLoad handler instead  because then you will be sure that it has properly initialized  loaded  the element in question   You could also try putting the script at the bottom of the page  or at least somewhere after the system-status element is declared  but it s not guaranteed to always work

User · Answer

A global variable would be best expressed in an external JavaScript file   var system status    Make sure that this has not been used anywhere else  Then to access the variable on your page  just reference it as such  Say  for example  you wanted to fill in the results on a textbox   document getElementById  textbox1   value   system status    To ensure that the object exists  use the document ready feature of jQuery   Example     function             textbox1   0  value   system status

User · Answer

Declare systemStatus in an outer scope and assign it in an onload handler   systemStatus   null   function onloadHandler evt        systemStatus   document getElementById              Or if you don t want the onload handler  put your script tag at the bottom of your HTML

[javascript] Variable not accessible when initialized outside function

Examples related to javascript

Examples related to global-variables