爲什麼此代碼只能在函數內部工作？

我有這個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。 –

爲什麼此代碼只能在函數內部工作？

回答

相關問題