title: adding class and removing class on click
body: <p>I have audio player and i made on button click for music to stop and play again but i want to change icon on it aswell, but i dont know how to add i class and remove it on click, thanks. Here is my code, i want to remove <strong>fa-pause</strong> and add <strong>fa-play</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var player = document.getElementById("player");
  var isPlaying = false;
  
  function togglePlay() {
    if (isPlaying) {
      player.pause()
    } else {
      player.play();
    }
  };
  player.onplaying = function() {
    isPlaying = true;
  };
  player.onpause = function() {
    isPlaying = false;
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="button" onclick="togglePlay()"&gt;&lt;i class="fas fa-pause"&gt;&lt;/i&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>