为什么此代码只能在函数内部工作？

我有这个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被调用，并且当我按下按钮中的一个，单词被添加到的按钮。有谁知道为什么它只在函数内部工作，以及如何改变它，以便它在函数之外工作？

来源

2014-03-05 CPC

你的代码与HTML有关吗？可能发生的情况是，在DOM完成加载之前，您的Javascript正在执行，因此所有'.getElementById'调用都会失败，因为关联的元素尚不存在。 –

我想这是因为那些代码运行时，这些元素不在DOM中。你可以把它放在window.onload事件中或使用jQuery的$(document).ready()函数。

或者，您可以将此代码粘贴在<head>或关闭</body>标签之前，它应该可以工作。

来源

2014-03-05 21:03:39 AlienWebguy

所以我只是把** window.onload; **在所有的document.getElementByIds之后的javascript中？ – CPC

不，你会把所有的代码放在onload函数中，比如'window.onload = function（）{/ *你的代码* /};' - 因为我们看不到你是如何加载JS的，你可能不会甚至需要onload事件处理程序，并且可以使用''或''放置方法来减少膨胀。 – AlienWebguy

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

来源

2014-03-05 21:04:37

仅供参考'DOMContentLoaded'在IE8中不受支持，因此如果您支持传统IE，请谨慎使用。 – AlienWebguy

是的。这就是为什么提到'现代浏览器'thingy。 –

为什么此代码只能在函数内部工作？

回答

相关问题