How to change a span content more than once using javascript

Question

I have a pause button that i want the icon to change on click between play and pause icons. The first click works and changes the icon from a play arrow to a pause icon but it will only change once. seemingly the else part of the function doesn't work

The icons used are from materializeCSS framework. I've seen similar questions but couldn't find a solution that worked for me. Not using span and instead using the id of the button in the JS code didn't work for me. it didn't load the icon and just returned plain text "pause" and "play_arrow".

the actual pausing functionality works fine, just a problem with the icons. Sorry if there is a solution posted here already but im new to programming and couldn't find anything myself that matched my problem.

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

}

i expected the button to change its content between a pause icon and play icon on each click. Actual result is one change and then it gets stuck. no error messages

kshetline · Accepted Answer · 2019-07-14T10:45:37.190

1

You're accidentally assigning the value that you mean to be doing a comparison with. You need:

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

By the way, instead of looking up the element over and over again, you should try something like:

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

Further, you don't even need to do the comparison to innerHTML, since pauseBoolean keeps track of the state for you. And why not make it a real boolean?

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

edited Jul 14 '19 at 10:45

answered Jul 14 '19 at 10:35

kshetline

12,547
4
37
73

This often-repeated question has a [canonical dupe target](http://stackoverflow.com/questions/38268329/). It doesn't need Yet Another Answer. – T.J. Crowder Jul 14 '19 at 10:43
@kshetline i'm new to coding and the pretend boolean was just the first way i though of doing it and couldn't remember how to change real booleans so i just used this seudo one for now. i much prefer your method though and will be giving it a change. thanks again! – Harry Whitnear Jul 14 '19 at 10:57

score 0 · Answer 2 · answered Jul 14 '19 at 10:46

Use this script

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

How to change a span content more than once using javascript

2 Answers2