Check class existence after clicking an element

user_14914373 0
Viewed 49

I'm trying to brush up my javascript and have a simple setup of html, CSS and JS connected.

The console.log prints out Clicked so I know it's working, but my code is wrong and I can't see it. The element is not checking for the existing class 'red'.

I'd like to check if the class red is there, and if it is then remove it and if its not, then add the class.

Can any of you point me in a direction?

TIA

tekst.addEventListener("click", () => {
  console.log("Clicked");
  tekst.classList.add("red");

  if (tekst.classList.contains("")) {
    tekst.classList.add("red");
  } else if (tekst.classList.contains("red")) {
    tekst.classList.remove("red");
  }
});
conditional-statements javascript
2 Answers

Your code works. But you're adding red and then immediately removing it so you won't see a change.

The alternative to the conditional is to just toggle the class instead. (I've added a timeout so you can see this working).

const tekst = document.querySelector('.tekst');

// Comment this line out to see the reverse effect
tekst.classList.add("red");
setTimeout(() => tekst.classList.toggle('red'), 2000);
.red { color: red; }
<div class="tekst">Test</div>

user_13770020

In my point of view, you just need to use toggle method like so: 

  tekst.classList.toggle("red");

user_153289900
Related