Как изменить значок при нажатии?

Question

У меня есть кнопка на моей странице, которая выглядит так: https://pierdzialka.misumi.me/d2TVS.png Как только вы щелкнете по ней, playPreview() будет вызван для воспроизведения аудиофайла.

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 Я пытаюсь заставить его изменить класс значка с воспроизведения на паузу при нажатии, код для этого находится здесь:

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

Как я могу этого добиться?

И последнее. для фактически воспроизводимого звука он помещается выше и имеет следующий вид:

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

Answer 1

Попробуйте это document.getElementById('yourIconElementId').classList.toggle("play");

Добавьте селектор Icon Element перед classList