javascript - 无法单击按钮来切换类

Question

无论我尝试做什么，我都无法让类在单击按钮时切换。我尝试了很多不同的方法，但无论我做什么，我都无法让它发挥作用。我认为我犯了一个非常简单的错误，但我一直无法弄清楚。我正在尝试解决这个问题，以便我可以构建一个在您单击按钮后进入和退出 View 的导航。

document.querySelector("btn-toggle").addEventListener("click",
  function() {
    document.getElementById("myDIV").classList.toggle("style");
  });

.style {
  background: green;
  font-size: 40px;
}

<button class="btn-toggle">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>

Answer 1

.btn-toggle 是 button 的类名，因此您需要适本地选择类 - 使用 querySelector，这将是 ".btn-toggle"。 (前面的.表示要搜索同名的类)

document.querySelector(".btn-toggle").addEventListener("click",
  function() {
    document.getElementById("myDIV").classList.toggle("style");
  });

.style {
  background: green;
  font-size: 40px;
}

<button class="btn-toggle">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>

使用 querySelector("btn-toggle") 表示您正在搜索一个标签名称为btn-toggle的元素，这不是你想要的。