Can't access global variables (Javascript)

Question

var hours = document.getElementById("hrs").value; // Global variables declared
var mins = document.getElementById("min").value; 
var seconds = document.getElementById("sec").value; 

function random()
{
    alert(hours);
    alert(mins);
    alert(seconds);
}

The output results as undefined in all 3 cases.

did you try to alert(hours) outside the function random ? and if so, what was the result ? — KodeFor.Me, Dec 30 '13 at 07:28
We can use this.mins or this.hours? because I use like this in backbone.js I dont know if we can use like this in javascript also? please check that — Nakul91, Dec 30 '13 at 07:32
It seems everything's OK! Could you please make sure `hrs`, `min` and `sec` HTML elements are correctly set? It should be something like this `` — Tun Zarni Kyaw, Dec 30 '13 at 07:33
I have checked the HTML part several times, it all looks fine. — scorpio98, Dec 30 '13 at 07:38

score 12 · Answer 1 · edited May 23 '17 at 12:34

This particular code might be within the body of the HTML file and this code is executed before the particular HTML elements are created. So, the the value undefined is assigned to those values.

So, you might want to move the value assignment part within the function itself.

var hours, mins, seconds;

function random()
{
    hours = document.getElementById("hrs").value;
    mins = document.getElementById("min").value; 
    seconds = document.getElementById("sec").value; 

    alert(hours);
    alert(mins);
    alert(seconds);
}

Note 1: Normally, if you don't use a library like jQuery, code like this is put in onload. This is what MDN has to say about, when onload is triggered

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

So, if you are getting values from the HTML elements, you might want to make sure that we fetch values from them only after the HTML document is completed loaded.

Note 2: Apart from this, you might want to check if you have really set the id of the HTML elements with hrs, min and sec properly. name and id attributes are actually used for different purposes.

Thanks!! I was able to fix it, you were write about that onload event. — scorpio98, Dec 30 '13 at 08:51

score 4 · Answer 2 · answered May 20 '15 at 01:17

4

I had a similar issue recently on a server side script.

This was because I was redeclaring the variable inside the function using var. Getting rid of var fixed the issue.

answered May 20 '15 at 01:17

Guillaume Renoult

967
8
19

This was the case with my issue. Thank you. – Robert Nov 30 '18 at 21:39

Imran Ali Khan · Answer 3 · 2015-06-20T07:40:18.160

Try this link, it might be helpful:

Do you know what value will be alerted if the following is executed as a JavaScript program?

var foo = 1;
function bar() {
    if (!foo) {
        var foo = 10;
    }
    alert(foo);
}
bar();

If it surprises you that the answer is “10”, then this one will probably really throw you for a loop:

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

score 0 · Answer 4 · answered Jan 18 '18 at 12:20

Easy to way to implement your example as below :

var hours = document.getElementById("hrs").value; // Global variables declared
var mins = document.getElementById("min").value; 
var seconds = document.getElementById("sec").value; 

function random()
{
    alert(hours + mins + seconds);
}

<input type="text" id="hrs" value="9" />
<input type="text" id="min" value=":30" /> 
<input type="text" id="sec" value=":25" />

<input type="button" id="submit" value="GetDetails" onclick="random();">

Can't access global variables (Javascript)

4 Answers4

Linked