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

但它不起作用。我知道它可以工作到第三行的末尾，但没有一个按钮（具有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";
}

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

Answer 1

我想这是因为在运行该代码时，这些元素不在DOM中。您可以将其置于window.onload事件中或使用jQuery的$(document).ready()函数。

或者，您可以将此代码添加到<head>或在结束</body>标记之前，它应该有效。

Answer 2

当JS执行时，DOM可能还没有完成渲染。

将JS放在<body>标记的末尾。那你就不需要这个功能。

如果您只是寻求现代浏览器支持，请执行以下操作。不需要jQuery！

document.addEventListener('DOMContentLoaded',function(){
  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";
});

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

2 个答案: