How can i make a condition of css classes using javascript? [duplicate]

Question

I have a small code where i want to

1. check which class is on the element curently.
2. change the curent class to the other class

html :

  <div class="text-area-box" id="text-area-box">
      <input type="text" name="" required="">
      <label>Titre</label>
  </div>

css:

 .text-area-box-active{
    position: relative;
  }
  .text-area-box {
    position: relative;
    display: none;
  }

js (not correct) just a way to show what i want to do :

if(curentClass = text_area_box)
  {
    element.classList.remove('text-area-box');
    element.classList.add('text-area-box-active');
  }
else{
    element.classList.remove('text-area-box-active');
    element.classList.add('text-area-box');
}

how can i make the correct javascript.

Answer 1

You can do this by getting element using JavaScript and then by using classList.contains() you can check whether this element contains a particular class or not.

//JavaScript to handle logic

function updateClass(){
//get element to get, compare and update class
 var element = document.getElementById("text-area-box");


 //classListApi to chek if this element has class 
 
 if(element.classList.contains('text-area-box'))
  {
 
    element.classList.remove('text-area-box');
    element.classList.add('text-area-box-active');
  }
else{
 
    element.classList.remove('text-area-box-active');
    element.classList.add('text-area-box');
}
  
  
}
//Call this functions according to your condition
 updateClass()

//adding colors for testing
.text-area-box{
background-color:red !important;
}

.text-area-box-active{
background-color:yellow !important;
}

<div class="text-area-box" id="text-area-box">
      <input type="text" name="" required="">
      <label>Titre</label>
  </div>