我嘗試在 html 中創建一個 On 和 Off 按鈕，但是當我將標簽輸入放入表單時不起作用，它保持打開狀態並不會切換到打開狀態

Question

我嘗試在 html 中創建一個 On 和 Off 按鈕，但是當我將標簽輸入放入表單時不起作用，它保持打開狀態並不會切換到打開狀態

 function onoff() { currentvalue = document.getElementById('onoff').value; if (currentvalue === "Off") { document.getElementById("onoff").value = "On"; } else { document.getElementById("onoff").value = "Off"; } }

 <form action="" method="post"> <input type="button" value="Off" id="onoff" onclick="onoff();" class="button button2"> </form>

Answer 1

您可以重命名您的函數名稱以不匹配單擊目標的id ，您的代碼將起作用：

 function onoffHandler() { currentvalue = document.getElementById('onoff').value; if (currentvalue === "Off") { document.getElementById("onoff").value = "On"; } else { document.getElementById("onoff").value = "Off"; } }

 <form action="" method="post"> <input type="button" value="Off" id="onoff" onclick="onoffHandler();" class="button button2"> </form>

這是因為遺留作用域被注入作用域鏈。 但僅適用於內聯處理程序。 這允許通過相同的變量名稱處理所有具有id或name屬性的表單元素。 並且由於這些id和name變量在更高（更近）的范圍內，因此它們隱藏了所有其他具有相同名稱的函數或變量。

如果您需要更徹底的解釋到底發生了什么，您可以查看這個 [answer] ( https://stackoverflow.com/a/9160009/3388225 )。

Answer 2

試試這個：

 <form action="" method="post"> <input type="button" value="Off" id="onoff" onclick="document.getElementById('onoff').value==='Off'?document.getElementById('onoff').value='On':document.getElementById('onoff').value='Off';" class="button button2"> </form>