Question

我有一个暂停按钮，我希望在播放和暂停图标之间单击时可以更改图标。第一次单击可将图标从播放箭头更改为暂停图标，但只会更改一次。看来该功能的其他部分不起作用

使用的图标来自materializeCSS框架。我曾见过类似的问题，但找不到适合我的解决方案。不使用跨度，而是在JS代码中使用按钮的ID对我不起作用。它没有加载图标，只是返回纯文本“ pause”和“ play_arrow”。

实际的暂停功能可以正常工作，只是图标有问题。抱歉，如果这里已经发布了解决方案，但对编程来说是新手，自己找不到与我的问题匹配的任何东西。

<button class="btn" id="pauseButton" onclick="pause()"><i class="material-icons white-text"><span id="playPause">play_arrow</span></i></button>

var pauseBoolean = 1;
function pause() {
    pauseBoolean *= -1;
    if (document.getElementById("playPause").innerHTML ="play_arrow") {
        document.getElementById("playPause").innerHTML ="pause";
    } else { 
        document.getElementById("playPause").innerHTML ="play_arrow";
    }

}

我希望按钮在每次单击时都能在暂停图标和播放图标之间更改其内容。实际结果是一次更改，然后卡住。没有错误消息

Answer 1

您不小心分配了要与之进行比较的值。您需要：

if (document.getElementById("playPause").innerHTML === "play_arrow") {

顺便说一句，您应该尝试以下操作，而不是一遍又一遍地查找元素：

var pauseBoolean = 1;
var playPauseBtn = document.getElementById("playPause");
function pause() {
    pauseBoolean *= -1;
    if (playPauseBtn.innerHTML === "play_arrow") {
        playPauseBtn.innerHTML = "pause";
    } else { 
        playPauseBtn.innerHTML = "play_arrow";
    }
}

此外，您甚至不需要与innerHTML进行比较，因为pauseBoolean会为您跟踪状态。为什么不将其设为真正的布尔值？

var paused = true;
var playPauseBtn = document.getElementById("playPause");
function pause() {
    paused = !paused;
    playPauseBtn.innerHTML = paused ? "play_arrow" : "pause";
}

Answer 2

使用此脚本

function pause() {
    if (document.getElementById("playPause").innerHTML =='play_arrow') {
        document.getElementById("playPause").innerHTML ='pause';
    } else { 
        document.getElementById("playPause").innerHTML ='play_arrow';
    }
}

如何使用JavaScript多次更改跨度内容

2 个答案: