Javascript 如何在单击时更改图标？

我的页面上有一个按钮，如下所示： 单击它后，将调用

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;
};

我正在尝试将icon类从play更改为pause on click，代码如下：

{{$.T“播放”}

我怎样才能做到这一点

最后一件事也是实际播放的音频，它被放置在更高的位置，就是这样：

---

试试这个

文档。getElementById（'yourIconElementId'）。classList.toggle（“play”）

将图标元素选择器添加到
类列表之前
当您按play时，它会将图标切换为暂停，但当您按它后，图标仍处于暂停状态。有什么原因吗？当我检查元素并按下它时，大约在按下4下之后，它的工作周期似乎很奇怪。在你按下它之前，类是
播放图标
，一旦你按下它，它就会转到
播放图标暂停
（奇怪的是它会显示暂停图标），然后再次暂停它，它只转到
图标
，结果是一个空白图标，然后再次返回到
播放图标