使用JavaScript單擊時更改按鈕上的文本

Question

我試圖用JavaScript按下按鈕時更改其文本。 應該很簡單，但是，它不起作用。 誰能解釋？ 這是我的代碼：

 function changeInnerHTML() { var buttonValue = document.getElementById('elementTEST').innerHTML; var buttonValueInnerHTMLBegin = '<p id="elementTEST">'; var buttonValueInnerHTMLEnd = '</p>'; alert("buttonValue = " + typeof(buttonValue)); // -> "string" if (buttonValue == "Online") { alert("turn off"); // -> "turn off" buttonValue = buttonValueInnerHTMLBegin + "Offline" + buttonValueInnerHTMLEnd; // -> DOESN'T CHANGE ANYTHING alert("turned off"); // -> "turned off" } else if (buttonValue == "Offline") { buttonValue = "Online"; } else { alert("There's a problem"); } } 

 <div class="containerTEST"> <div class="divTEST" onclick="changeInnerHTML()"> <p id="elementTEST">Online</p> </div> </div> 

無論是否包含“ buttonValueInnerHTMLBegin / End”變量，我都可以運行此命令，並且得到相同的結果。

我收到警報（在代碼中顯示為注釋），但是text / innerHTML不變。

謝謝你的幫助！

Answer 1

它不是參考，您必須在最后直接設置它：

document.getElementById('elementTEST').innerHTML = buttonValue

Answer 2

嘗試這個：

 var buttonValue = document.getElementById('elementTEST');  
    function changeInnerHTML(){
        if (buttonValue.innerHTML == "Online")
            buttonValue.innerHTML= "Offline";                  
        else if (buttonValue.innerHTML == "Offline") 
            buttonValue.innerHTML = "Online";
    }

Codepen： 示例

Answer 3

• 絕對沒有理由更改HTML。 僅更改textContent
• （使用Element.innerHTML = "bla"設置新的內部HTML）
• 使用Element.textContent = "bla"設置新的文本內容
• 不要使用內聯JS onclick出於代碼可維護性的考慮，建議不要使用它
• 出於語義原因和可訪問性，請使用<button>

這是一個簡單的版本

 [...document.querySelectorAll(".toggleOnline")].forEach( el => el.addEventListener("click", () => { el.textContent = /online/i.test(el.textContent) ? "Offline" : "Online"; }) ); 

 .toggleOnline { border: none; border-radius: 0; background: #ddd; padding: 8px 16px; } 

 <button class="toggleOnline" type="button" aria-live="assertive" aria-atomic="true"> Online </button> 

現在，您還可以選擇元素並使用空格鍵或Enter鍵切換按鈕。