將元素保存到變量並調用document.getElementByID（）

Question

之間的區別我意識到標題沒有多大意義，但我不知道如何表達我有的問題。我想了解在JavaScript中向按鈕添加事件，並且遇到了一個我無法弄清楚的錯誤。這裏有兩段代碼（這兩者都是在window.onload函數內）：

這一個工程：

document.getElementById("button").onclick = function func() { 
    document.getElementById("testParagraph").innerHTML = "I changed the text"; 
} 

這一個不：

var button = document.getElementById("button"); 
button.onclick = document.getElementById("testParagraph").innerHTML = "I changed the text"; 

和這裏的HTML：

<p id="testParagraph"> This <strong> is </strong> a test </p> 
<button id="button">Run Test</button> 

通過工作，我的意思是第一個顯示了「這是一個測試」，直到後，我點擊段落按鈕，當它改變爲「我改變了文字」。第二個不起作用，因爲一載入頁面就加載「我改變了文本」，而不是等待按鈕被點擊。因爲我是JavaScript新手，這些對我來說看起來是一樣的，我使用它的id獲取按鈕，然後添加一個onclick事件監聽器。只是第二個將按鈕分配給一個變量，第一個只是用getElementById抓取它。兩者都在window.onload函數中運行。有人能幫我看看區別嗎？

編輯：我將第二段代碼更改爲以下，它工作正常。

var buttonX = document.getElementById("button"); 
buttonX.onclick = function clicked() { 
    document.getElementById("testParagraph").innerHTML = "I changed the text"; 
} 

Answer 1

您必須在回調函數中將回調包裝爲onclick。你不能只是寫命令，像你一樣

var button = document.getElementById("button"); 
button.onclick = function(){ 
    document.getElementById("testParagraph").innerHTML = "I changed the text"; 
}; 

存放在變量的參考元素或沒有在這裏有沒有影響。