使用 if 条件在 JavaScript 中切换添加和删除类

Question

I have a element with an id="caretToggle" and a button with onclick="caretToggle()". This fires a function that adds a class to invert the caret on the button.

I am successful in running:

function caretToggle() {
  var caretElement = document.getElementById("caretToggle");
  caretElement.classList.add("dropup");
}

But This leaves the caret inverted after the collapse is closed. I want to toggle the caret once the button is clicked again.

This is my condition code that I have failed to get working:

function caretToggle() {
  var caretElement = document.getElementById("caretToggle");
  if (caretElement.classList.contains("dropup")) {
    caretElement.classList.remove("dropup");
  } else {
    caretElement.classList.add("dropup");
  }
}

Thank you in advance for any help you may provide!

Answer 1

You dont need to check wheter contains or not. What you can do simply use toggle function on classList :)

function caretToggle() {
  var caretElement = document.getElementById("caretToggle");
  caretElement.classList.toggle("dropup");
}

And also there is a conditional toggle like:

caretElement.classList.toggle("dropup", counter < 10)

Check here from MDN

Answer 2

If you want to toggle class simply do it like this

 let caretElement = document.getElementById("caretToggle"); function caretToggle() { caretElement.classList.toggle("dropup"); console.log('class attribute contains: ', caretElement.className) }

 span { margin:10px; } .dropup { background-color: purple; padding: 1em; border-radius: 10px; color: white; }

 <span id="caretToggle">HTMLElement</span> <br/> <br/> <br/> <br/> <button onclick="caretToggle()">Click</button>