如何更改按鈕的onclick屬性所引用的功能？

Question

這是我的代碼：

 function changeText() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; document.getElementById("myButton").innerHTML = "Change that back"; document.getElementById("myButton").onclick = "changeBack()"; } function changeBack() { document.getElementById("myHeader").innerHTML = "Hello World!"; document.getElementById("myButton").innerHTML = "Change text"; document.getElementById("myButton").onclick = "changeText()"; }

 <script src="script.js"></script> <h1 id="myHeader">Hello World!</h1> <button id="myButton" ; onclick="changeText()">Change text</button>

我的目的是使按鈕在兩個功能和文本狀態之間來回切換，但是所發生的一切是第一次切換文本，然后不再執行任何操作。 我想知道如何正確更改按鈕所指的功能。

Answer 1

簡單，設置函數本身。

document.getElementById("myButton").onclick = changeText;
...
document.getElementById("myButton").onclick = changeBack;

Answer 2

如果要使用Javascript字符串而不是函數引用，則需要設置屬性，而不是屬性。

 function changeText() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; document.getElementById("myButton").innerHTML = "Change that back"; document.getElementById("myButton").setAttribute("onclick", "changeBack()"); } function changeBack() { document.getElementById("myHeader").innerHTML = "Hello World!"; document.getElementById("myButton").innerHTML = "Change text"; document.getElementById("myButton").setAttribute("onclick", "changeText()"); }

 <script src="script.js"></script> <h1 id="myHeader">Hello World!</h1> <button id="myButton" onclick="changeText()">Change text</button>

Answer 3

您可以給我們同樣的評論，只需檢查文本即可將其來回切換：

 function changeText() { var btn = document.getElementById("myButton") var txt = document.getElementById("myHeader") if (txt.innerHTML == 'Hello World!') { txt.innerHTML = "Have a nice day!"; btn.innerHTML = "Change that back"; } else { txt.innerHTML = "Hello World!"; btn.innerHTML = "Change text"; } }

 <html> <body> <script src="script.js"></script> <h1 id="myHeader">Hello World!</h1> <button id="myButton" onclick="changeText()">Change text</button> </body> </html>

Answer 4

添加條件語句。 作為一個非常幼稚的示例，您可以添加第三個函數並執行以下操作：

<body>

    <script src="script.js"></script>

    <h1 id="myHeader">Hello World!</h1>
    <button id="myButton"; onclick="determineFunction()">Change text</button>

</body>

function determineFunction() {
    if(document.getElementById("myHeader").innerHTML === "Have a nice day!"){
        changeText();
    }
    else{
        changeBack();
    }
}
function changeText() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
    document.getElementById("myButton").innerHTML = "Change that back";
    document.getElementById("myButton").onclick = "changeBack()";   
}

function changeBack() {
    document.getElementById("myHeader").innerHTML = "Hello World!";
    document.getElementById("myButton").innerHTML = "Change text";
    document.getElementById("myButton").onclick = "changeText()";
}

如果要執行此方法，則應檢查所有元素的文本-並可能有第三個條件，控制台記錄錯誤或其他內容。

不過，這只是一種方法-有許多方法可以實現此目的-例如設置全局布爾值並檢查該值以確定要調用的函數。

如何更改按鈕的onclick屬性所引用的功能？

問題描述

4 個解決方案

解決方案1
5 2018-04-13 16:23:54

解決方案2
4 2018-04-13 16:26:27

解決方案3
2 已采納 2018-04-13 16:22:44

解決方案4
2 2018-04-13 16:25:53

如何更改按鈕的onclick屬性所引用的功能？

問題描述

4 個解決方案

解決方案1 5 2018-04-13 16:23:54

解決方案2 4 2018-04-13 16:26:27

解決方案3 2 已采納 2018-04-13 16:22:44

解決方案4 2 2018-04-13 16:25:53

解決方案1
5 2018-04-13 16:23:54

解決方案2
4 2018-04-13 16:26:27

解決方案3
2 已采納 2018-04-13 16:22:44

解決方案4
2 2018-04-13 16:25:53