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.

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.

• javascript

• 1 did you try to alert(hours) outside the function random ? and if so, what was the result ? – KodeFor.Me Commented Dec 30, 2013 at 7: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 Commented Dec 30, 2013 at 7: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 <input type='text' id='hrs' /> – Tun Zarni Kyaw Commented Dec 30, 2013 at 7:33
• I have checked the HTML part several times, it all looks fine. – scorpio98 Commented Dec 30, 2013 at 7:38

4 Answers 4

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.

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.

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

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();">