javascript 为什么onclick在if条件后不起作用？

8dtrkrch 于 2023-03-11 发布在 Java

关注(0)|答案(4)|浏览(261)

我编写了JS代码，当我按下on按钮时，向mainDiv添加一个类。当我再次按下时，类应该被删除。然而，当我第一次按下时，类被添加，但当我再次按下时，类没有被删除。

"use strict";
const mainDiv = document.getElementById("main");
const myButton = document.querySelector("button");

if (myButton.textContent === "Add Class") {
  myButton.onclick = function() {
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
  };
} else if (myButton.textContent === "Remove Class") {
  myButton.onclick = function() {
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
  };
} else {
  console.log("there is a problem in your code");
}

<div id="main" class="show cool main-div zero">Our Main Div</div>
<button>Add Class</button>

我尝试为类创建toggle，而不使用toggle方法，以应用if条件并在每次单击时更改button的值

JavaScript

来源：https://stackoverflow.com/questions/75673266/why-onclick-does-not-work-after-if-condition

4条答案

按热度按时间

cedebl8k1#

正如@CBroe在他们的评论中指出的那样，您的条件只运行一次，所以您的事件处理程序实际上不会触发，除非脚本第一次加载并运行条件。
相反，您可以使用一个处理程序并在其中定义条件，如下所示：

"use strict";
const mainDiv = document.getElementById("main");
const myButton = document.querySelector("button");

myButton.onclick = function() {
  if (myButton.textContent === "Add Class") {
    console.log("change 1");
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
  } else if (myButton.textContent === "Remove Class") {
    console.log("change 2");
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
  } else {
    console.log("there is a problem in your code");
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JS training</title>
</head>

<body>
  <div id="main" class="show cool main-div zero">Our Main Div</div>
  <button>Add Class</button>
</body>

</html>

赞(0）回复(0）举报 2023-03-11

lf3rwulv2#

我认为你代码中的问题出在条件语句上，第二个条件永远不会为真，因为按钮文本内容还不是“Remove Class”，所以当你再次点击按钮时，第一个条件仍然为真，再次执行添加类的onclick事件监听器，但是这次按钮文本内容已经是“RemoveClass”了，因为您在上次单击时更改了它。您可以在一个条件语句中为这两种情况添加事件侦听器，并使用一个布尔标志来跟踪类的状态。

"use strict";
const mainDiv = document.getElementById("main");
const myButton = document.querySelector("button");
let isClassAdded = false;

myButton.onclick = function() {
  if (isClassAdded) {
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
    isClassAdded = false;
  } else {
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
    isClassAdded = true;
  }
};

赞(0）回复(0）举报 2023-03-11

vltsax253#

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JS training</title>
<link rel="stylesheet" href="style.css" />
<script>

  function myfunc(myButton){

if (myButton.innerText == "Add Class") {
    myButton.innerText = "Remove Class";
    document.getElementById("main").addClass("added-from-js");
} else if (myButton.innerText == "Remove Class") {
myButton.innerText = "Add Class";
document.getElementById("main").removeClass("added-from-js");

} else {
  console.log("there is a problem in your code");
}
  }

  </script>
</head>

<body>
  <div id="main" class="show cool main-div zero">Our Main Div</div>
  <button onclick="myfunc(this)">Add Class</button>
  <script src="main.js"></script>
</body>

</html>

你的错误使用if语句首先你想添加事件onclick然后在事件里面你做你的条件

赞(0）回复(0）举报 2023-03-11

5kgi1eie4#

这里的问题是您的代码只运行一次，并且附加处理程序以添加类"added-from-js"并将文本更改为"Remove Class"。
如果要主动监听单击事件，最好的方法是添加事件监听程序。每次单击后，监听程序将检查条件并相应地继续：

myButton.addEventListener('click', function() {
  if (myButton.textContent === "Add Class") {
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
  } else if (myButton.textContent === "Remove Class") {
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
  } else {
    console.log("there is a problem in your code");
  }
})

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 为什么onclick在if条件后不起作用？

4条答案

相关问题

热门标签

最新问答