为什么这段代码只能在函数内部运行？

Question

为什么这段代码只能在函数内部运行？

我有一个不在函数中的JavaScript:

var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
numbers.sort(function () {
    return 0.5 - Math.random();
});
numbers.push("here");
document.getElementById("b1").innerHTML = numbers[0];
document.getElementById("b2").innerHTML = numbers[1];
document.getElementById("b3").innerHTML = numbers[2];
document.getElementById("b4").innerHTML = numbers[3];
document.getElementById("b5").innerHTML = numbers[4];
document.getElementById("b6").innerHTML = numbers[5];
document.getElementById("b7").innerHTML = numbers[6];
document.getElementById("b8").innerHTML = numbers[7];
document.getElementById("b9").innerHTML = numbers[8];
document.getElementById("b11").innerHTML = numbers[9];
document.getElementById("b12").innerHTML = numbers[10];
document.getElementById("b13").innerHTML = numbers[11];
document.getElementById("b14").innerHTML = numbers[12];
document.getElementById("b15").innerHTML = numbers[13];
document.getElementById("b16").innerHTML = numbers[14];
document.getElementById("b10").innerHTML = numbers[15];
document.getElementById("b10").style.backgroundColor = "white";

Run Code Online (Sandbox Code Playgroud)

但它不起作用.我知道它可以工作到第三行的末尾,但没有一个按钮(具有id b1,b2,b3 ......的按钮)说什么.

当我把它更改为:

var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
numbers.sort(function () {
    return 0.5 - Math.random();
});
numbers.push("here");

function buttonClick() {
    document.getElementById("b1").innerHTML = numbers[0];
    document.getElementById("b2").innerHTML = numbers[1];
    document.getElementById("b3").innerHTML = numbers[2];
    document.getElementById("b4").innerHTML = numbers[3];
    document.getElementById("b5").innerHTML = numbers[4];
    document.getElementById("b6").innerHTML = numbers[5];
    document.getElementById("b7").innerHTML = numbers[6];
    document.getElementById("b8").innerHTML = numbers[7];
    document.getElementById("b9").innerHTML = numbers[8];
    document.getElementById("b11").innerHTML = numbers[9];
    document.getElementById("b12").innerHTML = numbers[10];
    document.getElementById("b13").innerHTML = numbers[11];
    document.getElementById("b14").innerHTML = numbers[12];
    document.getElementById("b15").innerHTML = numbers[13];
    document.getElementById("b16").innerHTML = numbers[14];
    document.getElementById("b10").innerHTML = numbers[15];
    document.getElementById("b10").style.backgroundColor = "white";
}

Run Code Online (Sandbox Code Playgroud)

当用户按下任何按钮时,将调用函数buttonClick,当按下其中一个按钮时,单词将添加到按钮中.有谁知道为什么它只在函数内部工作以及如何更改它以使它在函数之外工作？

Answer 1

Ali*_*guy 5

我想是因为这些元素在运行代码时不在DOM中.你可以将它放在一个window.onload事件中或使用jQuery的$(document).ready()功能.

或者,您可以<head>在结束</body>标记之前或之前粘贴此代码,它应该可以工作.

归档时间：	12 年，2 月前
查看次数：	143 次
最近记录：	11 年，10 月前