如何更改点击图标？

Question

I have a button on my page that looks like this: https://pierdzialka.misumi.me/d2TVS.png Once you click it the playPreview() is called to play an audio file.

var preview = document.getElementById("BeatmapPreview");
var isPlaying = false;

function playPreview() {
 if (isPlaying) {
  preview.pause();
  classList.toggle("play");
 } else {
  preview.play();
  classList.toggle("pause");
 }
};

preview.onplaying = function() {
 isPlaying = true;
};

preview.onpause = function() {
 isPlaying = false;
};

I'm trying to make it change the icon class from play to pause on click too, the code for that is here:

<a onclick="playPreview()" class="ui blue labeled icon button">
  <i class="play icon"></i> 
  {{ $.T "Play" }}
</a>

How can I achieve this?

Final thing too is for the audio actually being played, that is placed further up and is just this:

<audio id="BeatmapPreview">
  <source src="https://misumi.me/preview/{{ .Beatmapset.ID }}.mp3">
</audio>

Answer 1

Try this document.getElementById('yourIconElementId').classList.toggle("play");

Add your Icon Element selector before classList