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”更改为“另一个测试”，反之亦然？

Answer 1

只需在这两个if语句之间切换：

if (c = a.instances[c["data-cke-widget-id"]]){
  d = b.getFirst(g.isParserWidgetElement);
  f.push({
    wrapper: b,
    element: d,
    widget: c,
    editables: {}
  });
  if (d !== null && "1" != d.attributes["data-cke-widget-keep-attr"]) {
    delete d.attributes["data-widget"];
  }
}

另外，正如@CertainPerformance在其他答案中提到的那样，我建议您使用let button = document.getElementById("js"); let toggleText = document.getElementById("test"); button.addEventListener('click', function() { if (toggleText.innerHTML !== "another test") { toggleText.innerHTML = "another test"; } else { toggleText.innerHTML = "test"; } });而不是textContent，因为您正在检查和切换元素的字符串内容，不是元素本身。

Answer 2

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

当您想警告其他程序员您要重新分配相关变量时，您也应该只使用let - 否则，请使用const。

此外，如果您要更改元素的文本，请改为分配给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>

Answer 3

首先， .innerHTML 仅适用于设置/获取包含HTML的字符串。如果不是，请使用 .textContent ，这样可以提高效率并降低安全风险。

然后，您只需要切换if语句，可以使用 JavaScript ternary operator 来完成。

此外，不是使用onclick之类的事件属性。使用 .addEventListener() ，这是更强大的，并遵循现代标准。

// Get a reference to the <p> that is inside of the element who's id is "test"
let output = document.querySelector("#test p");

// Set up an event handler for the "Change" element
document.getElementById("js").addEventListener("click", function() {
  // Check the current textContent and set it to the other value
  output.textContent === "test" ? output.textContent = "another test" : output.textContent = "test";
});

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

Answer 4

我将在这里扩展几个优秀的答案。

如果你有更多选项并想要遍历列表怎么办？

在这种情况下，我使用data attribute来保持按钮状态。只有两个选项，这仍然是一种有效的方法。

我将使用Scott's答案作为我的基础，所以他所说的一切都是恰当的。

＆＃13;

// Get a reference to the <p> that is inside of the element who's id is "test"
let output = document.querySelector("#test p");

// Set up an event handler for the "Change" element
document.getElementById("js").addEventListener("click", function() {
  //Here is out list of options
  var options = ["test", "another test", "yet another test", "Really? Another Test?"];
  
  //get the current state value and increment it
  var index = parseInt(this.dataset.state, 10) + 1;
  
  
  //if index is out of bounds set it to 0
  if(index > options.length -1 || index < 0)
  {
    index = 0;
  }  
  
  //Set the text
  output.textContent = options[index];
  
  //Set the new state 
  this.dataset.state = index;
});

＆＃13;

<div class="test" id="test">
    <p>this is a test</p>
</div>
<p id="js" class="test" data-state="-1" >Change</p>

＆＃13;

使用“onclick”处理程序

4 个答案: