使用HTML DOM分配事件

Question

我正在使用EasyJavaScript應用程序學習JavaScript。 我正在修改演示的示例，以了解我是否真的理解它們。 此刻，我要分配特定的功能鍵，而不該按鈕內投入的onclick。

HTML：

<p>Test paragraph</p>
<button id="bg1">Button with function assigned</button>

Javascript：

function bgChange() {
    document.getElementById("bg1").onclick = changeBG;
}

function changeBG() {
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
}

調試器什么也沒顯示。 請向我解釋我的思維方式在哪里出錯或出了什么問題。

Answer 1

定義函數不會運行它們。 因此，您必須叫他們去做他們想要的事情。 在您的示例中，您必須在某處調用bgChange() 。

可以這樣做。

 function bgChange() { document.getElementById("bg1").onclick = changeBG; } function changeBG() { document.body.style.backgroundColor = "black"; document.body.style.color = "white"; } bgChange(); 

 <p>Test paragraph</p> <button id="bg1">Button with function assigned</button> 

考慮定義功能就像將您的朋友添加到電話簿中。 如果您需要他的幫助，則首先必須用他需要的參數給他打電話，然后他會退還您需要的東西。

Answer 2

您需要在按鈕單擊時調用函數bgChange並通過在末尾添加一對括號()執行changeBG

 function bgChange() { document.getElementById("bg1").onclick = changeBG(); } function changeBG() { document.body.style.backgroundColor = "black"; document.body.style.color = "white"; } 

 <p>Test paragraph</p> <button id="bg1" onclick="bgChange()">Button with function assigned</button>