Can't access global variables (Javascript)

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);
}

输出结果在所有3种情况下都undefined


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

链接地址: http://www.djcxy.com/p/88044.html

上一篇: 有两种方法可以跳转到HTML中的片段标识符吗?

下一篇: 无法访问全局变量(Javascript)