How to enable a class in html through Javascript

Question

I have a button PAUSE/PLAY and wanted to click on PAUSE were activated the class .carousel-control-next-icon.

Here’s the excerpt from the code I want to insert class: .carousel-control-next-icon when clicked.

<label id="myBtn2" for="play">
 <i class="fa fa-pause" aria-hidden="true"></i>
</label>

I tried to do using onclick, but I couldn’t.

      #player{
        position: absolute;
        bottom: 40%;
        right: 40px;
        z-index: 999;
      }
      .controls i{
        background: linear-gradient(180deg,#fff 0%,#ddd 100%);
        padding: 11px 13px 11px 13px;
        border-radius: 50%;
      }
      .controls i{
        font-size: 20px;
        color: #178F5D;
        text-align: center;
        transition: 1s;
        transition: 100ms all ease;
      }
      .controls label {
        position: absolute;
        cursor: pointer;
      }
      #myBtn,
      #myBtn2 {
        display: none;
      }
      #play:checked ~ .controls #myBtn,
      #pause:checked ~ .controls #myBtn2 {
        display: block;
      }
      [name="player"] {
        display: none;
      }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="player">
 <input type="radio" name="player" id="pause" checked>
 <input type="radio" name="player" id="play">
 <div class="controls">
   <label id="myBtn2" for="play"><i class="fa fa-pause" aria-hidden="true"></i></label>
   <label id="myBtn" for="pause"><i class="fa fa-play" aria-hidden="true"></i></label>
              
 </div>
</div>

Answer 1

  var btn2 = document.getElementById('myBtn2') 
  var showTag = document.querySelector('.controls') //pegar a div com class 'controls' sóp ara testarmos no final
  btn2.addEventListener('click', addClass)//Event Listener de click o mesmo evento de 'onclick' na tag html, (ao clicar executar a função addClass)

  function addClass() {
    if (btn2.getAttribute('class') == '.carousel-control-next-icon') {
     btn2.setAttribute('class', '.carousel-control-next-icon')
    } // Vai pegar/checar se o valor atributo class do label btn2 é igual a .carousel-control-next-icon, e se for ele apenas vai substituir pelo mesmo e não adicionar mais class
    else {
      btn2.setAttribute('class', '.carousel-control-next-icon')
    } //Caso a class do label btn2 não for igual a .carousel-cont... ele vai adicionar uma class. Adicionando na tag label um class=".carousel-control.next-icon"
    alert(showTag.innerHTML)// Só Para testar e conferir se a class está no label
  }
 

          #player{
            position: absolute;
            bottom: 40%;
            right: 40px;
            z-index: 999;
          }
          .controls i{
            background: linear-gradient(180deg,#fff 0%,#ddd 100%);
            padding: 11px 13px 11px 13px;
            border-radius: 50%;
          }
          .controls i{
            font-size: 20px;
            color: #178F5D;
            text-align: center;
            transition: 1s;
            transition: 100ms all ease;
          }
          .controls label {
            position: absolute;
            cursor: pointer;
          }
          #myBtn,
          #myBtn2 {
            display: none;
          }
          #play:checked ~ .controls #myBtn,
          #pause:checked ~ .controls #myBtn2 {
            display: block;
          }
          [name="player"] {
            display: none;
          }

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div id="player">
     <input type="radio" name="player" id="pause" checked>
     <input type="radio" name="player" id="play">
     <div class="controls">
       <label id="myBtn2" for="play"><i class="fa fa-pause" aria-hidden="true"></i></label>
       <label id="myBtn" for="pause"><i class="fa fa-play" aria-hidden="true"></i></label>
                  
     </div>
    </div>

And if you want to be Enabling and Deactivating the class (erasing and creating it) just put one removeAttribute('class') Example:

NOTE: In case you want to be deactivating and activating the class <label id=myBtn2 and activate only when you click on it, you will have to put a onclick in html or a enventListener in javascript to call the addClass function to the other label o <label id=myBtn disable the myBtn2 class

  var btn2 = document.getElementById('myBtn2') 
  var showTag = document.querySelector('.controls') //pegar a div com class 'controls' sóp ara testarmos no final
  btn2.addEventListener('click', addClass)//Event Listener de click o mesmo evento de 'onclick' na tag html, (ao clicar executar a função addClass)

  function addClass() {
    if (btn2.getAttribute('class') == '.carousel-control-next-icon') {
     btn2.removeAttribute('class')
    } // Vai apagar a class se o valor atributo class do label btn2 é igual a .carousel-control-next-icon, e se for ele apenas vai substituir pelo mesmo e não adicionar mais class
    else {
      btn2.setAttribute('class', '.carousel-control-next-icon')
    } //Caso a class do label btn2 não for igual a .carousel-cont... ele vai adicionar uma class. Adicionando na tag label um class=".carousel-control.next-icon"
    alert(showTag.innerHTML)// Só Para testar e conferir se a class está no label
  }
 

          #player{
            position: absolute;
            bottom: 40%;
            right: 40px;
            z-index: 999;
          }
          .controls i{
            background: linear-gradient(180deg,#fff 0%,#ddd 100%);
            padding: 11px 13px 11px 13px;
            border-radius: 50%;
          }
          .controls i{
            font-size: 20px;
            color: #178F5D;
            text-align: center;
            transition: 1s;
            transition: 100ms all ease;
          }
          .controls label {
            position: absolute;
            cursor: pointer;
          }
          #myBtn,
          #myBtn2 {
            display: none;
          }
          #play:checked ~ .controls #myBtn,
          #pause:checked ~ .controls #myBtn2 {
            display: block;
          }
          [name="player"] {
            display: none;
          }

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div id="player">
     <input type="radio" name="player" id="pause" checked>
     <input type="radio" name="player" id="play">
     <div class="controls">
       <label id="myBtn2" for="play"><i class="fa fa-pause" aria-hidden="true"></i></label>
       <label id="myBtn" for="pause" onclick="addClass()"><i class="fa fa-play" aria-hidden="true"></i></label>
                  
     </div>
    </div>

I hope I’ve helped