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

在所有3个案例中，输出结果为undefined。

Answer 1

此特定代码可能位于HTML文件的正文中，并且在创建特定HTML元素之前执行此代码。因此，值undefined将分配给这些值。

因此，您可能希望在函数本身中移动值赋值部分。

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

注1：通常，如果您不使用像jQuery这样的库，那么这样的代码就放在onload中。这就是MDN所说的，when onload is triggered

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像和子帧已完成加载。

因此，如果您从HTML元素中获取值，您可能希望确保仅在HTML文档加载完成后才从它们中获取值。

注2：除此之外，您可能还想检查是否确实使用id，hrs和min设置了sec HTML元素。 {{1}}正确。 name and id attributes are actually used for different purposes

Answer 2

我最近在服务器端脚本上遇到了类似的问题。

这是因为我使用var重新声明了函数内部的变量。摆脱var修复了这个问题。

Answer 3

试试此链接，它可能会有所帮助：

如果将以下内容作为JavaScript程序执行，您知道会提醒哪些值吗？

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

如果你的答案是“10”让你感到惊讶，那么这个可能真的会让你陷入一个循环：

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

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

Answer 4

通过以下方式轻松实现您的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

无法访问全局变量（Javascript）

4 个答案: