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>

我基本上希望按钮替换firstElement div的内容。为什么这行不通？

谢谢

Answer 1

document.getElementById返回一个元素

也=是分配，您需要==或===进行比较

您可能是这个意思吗？

<div id="firstElement">
  <h1>This is the 1st element</h1>
</div>

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

{{1}}

Answer 2

这正是您所要的。你很近。

1）当包含javascript时，您可以只使用脚本标签，当您使用JSON或JQuery时，即必须使用.js文件的包含标签，它将可以正常工作。可以使用脚本类型= text / javascript来标记javascript代码。

2）在javascript中进行比较时：使用三个等号（===）

进行非变量类型敏感比较时：使用两个等号（==）

设置变量时：使用一个等号（=）

https://www.geeksforgeeks.org/difference-between-and-operator-in-javascript/

3）调用动态标头时，它不是数组，因此不需要[0]，您只需要比较动态标头div的innerhtml，它只是一个标头，数组用于多个对象。继续编写代码，因为您似乎有一个好的开始，并且犯了一些小的语法错误。

<!DOCTYPE html>
<html>

<body>

  <button onclick="changeHeader()">Click me</button>

  <div id="dynamicHeader"><h1>Hello World</h1></div>

  <p>Clicking the button changes the header.</p>

  <script>
    function changeHeader() {
      if (document.getElementById("dynamicHeader").innerHTML === "<h1>Hello World</h1>") {
        document.getElementById("dynamicHeader").innerHTML = "<h1>Goodbye World</h1>";
      } else {
        document.getElementById("dynamicHeader").innerHTML = "<h1>Hello World</h1>"
      }
    }
  </script>
</body>

</html>

Answer 3

尝试这样。在这里，我引入了一个标志并将其切换为检查内容。

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>

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

3 个答案: