JavaScript: Global variables?

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

It really depends on where your javascript 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 domready type event from a javascript framework.

Answer 5

a global variable would be best expressed in an external JS file

var system_status;

make sure that this has not been used anywhere else. then to access the variable on your page just reference 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;
});