如何交换标题标签的内容 - HTML/Javascript

Question

我有以下几点：function changeFirst() {  let p = document.getElementById("firstElement")[0].innerhtml;  alert(p);  if (p = "<h1>This is the 1st element</h1>") {    document.getElementById("firstElement").innerHTML = "<h1>Changed first</h1>"  } else {    document.getElementById("firstElement").innerHTML = "<h1>Switched back first</h1>"  }}<div id="firstElement">  <h1>This is the 1st element</h1></div><button onclick="changeFirst()">Change first element</button>我基本上希望按钮交替firstElementdiv的内容。为什么这不起作用？

Answer 1

document.getElementById 返回一个元素

= 也是赋值，你想要 == 或 === 进行比较

你可能是这个意思：

function changeFirst() {

  let h = document.querySelector("#firstElement h1");

  h.textContent = h.textContent==="This is the 1st element" ? "Changed first" : "This is the 1st element"

}

<div id="firstElement">

  <h1>This is the 1st element</h1>

</div>

<button type="button" onclick="changeFirst()">Change first element</button>

Answer 2

像这样尝试。这里我引入了一个标志，并切换到检查内容。

var changed = false;

function changeFirst() {

 

  if (!changed) {

    changed = true;

    document.getElementById("firstElement").innerHTML = "<h1>Changed first</h1>";

  } else {

    changed = false;

    document.getElementById("firstElement").innerHTML = "<h1>Switched back first</h1>";

  }

}

<div id="firstElement">

  <h1>This is the 1st element</h1>

</div>

<button onclick="changeFirst()">Change first element</button>