Question

无论我做什么，我都无法在单击按钮时切换类。我尝试了许多不同的方法，无论我做什么，我都无法使它正常工作。我认为我犯了一个非常简单的错误，但我无法弄清楚。我试图弄清楚这一点，以便我可以构建一个导航，在单击按钮后可以进入和退出视图。

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"。（前面的.表示要搜索具有该名称的 class ）

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的元素，这不是您想要的。

Answer 2

您应该在选择器中添加一个点，使其成为类选择器。

例如，“。btn-toggle”将与您的按钮匹配。使用代码，您可以看到我们querySelector将搜索名为btn-toggle的标签。

无法单击按钮来切换课程

2 个答案: