Tutorial :Variable not accessible when initialized outside function


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?


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.


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.


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.


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.


This article is the answer to such problems! ;) Read it carefully!


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.


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


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 <head> 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:

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

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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »