使用 "onclick"处理程序的 JavaScript innerHTML 操作

Question

我想知道如何更改 innerHtml 以在两种状态之间来回切换。我有这个 html

 <div class="test" id="test">
    <p>this is a test</p>
</div>
<p id="js" class="test" >Change</p>

这是我的 JavaScript

let button = document.getElementById("js");

button.onclick = function() {
document.getElementById("test").innerHTML = "test";
};

如何将 innerHTML 从“test”更改为“another test”，反之亦然？

Answer 1

最好不要在 HTML 中存储状态 - 不要针对 HTML 中当前的内容进行测试，而是在 Javascript 中保留一个变量。

你也应该只在你想警告其他程序员你将要重新分配有问题的变量时使用 let - 否则，使用 const。

此外，如果您要更改元素的 text，请改为分配给 textContent - 它更安全、更快且更可预测。

const button = document.getElementById("js");
const test = document.getElementById("test");
let clicked = false;
button.onclick = function() {
  clicked = !clicked;
  if (clicked) test.textContent = 'another test';
  else test.textContent = 'test';
};

 <div class="test" id="test">
    <p>this is a test</p>
</div>
<p id="js" class="test" >Change</p>