单击 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";
    }

代码笔：example

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>

现在您还可以使用 Tab 键并使用 空格键 或 Enter 来切换按钮。

单击 JavaScript 时更改按钮上的文本

Change text on button when clicked with JavaScript

html

javascript

innerhtml