I have plete jsfiddle sample /

Basically I have javascript function as shown below

function playButtonPress() {

    if (play == false) {
        $("#playbutton").removeClass("icon-play").addClass("icon-stop").button('refresh');

        console.log("playButton pressed play was false show pause button");
        play = true;
    } else {
        $("#playbutton").removeClass("icon-pause").addClass("icon-play").button('refresh');
        console.log("playButton pressed play was true show play button");
        play = false;
    }
}

I want to toggle a button icon between 'play' and 'pause'. i.e. if user was playing some contents button should be pause and if user was not playing content it should be 'play'.

It appears that I have hooked all the javascript function correctly, but can't seem to figure out how to change icon class of button from icon-play & icon-pause.

How does one change icon associated with a button programmatically? I also see different behavior - in chrome the icon does change but the size is really tiny, whereas in Firefox icon doesn't change.

Or is there any better way to do this?

I have plete jsfiddle sample http://jsfiddle/snijsure/usg8z/3/

Basically I have javascript function as shown below

function playButtonPress() {

    if (play == false) {
        $("#playbutton").removeClass("icon-play").addClass("icon-stop").button('refresh');

        console.log("playButton pressed play was false show pause button");
        play = true;
    } else {
        $("#playbutton").removeClass("icon-pause").addClass("icon-play").button('refresh');
        console.log("playButton pressed play was true show play button");
        play = false;
    }
}

I want to toggle a button icon between 'play' and 'pause'. i.e. if user was playing some contents button should be pause and if user was not playing content it should be 'play'.

It appears that I have hooked all the javascript function correctly, but can't seem to figure out how to change icon class of button from icon-play & icon-pause.

How does one change icon associated with a button programmatically? I also see different behavior - in chrome the icon does change but the size is really tiny, whereas in Firefox icon doesn't change.

Or is there any better way to do this?

• javascript
• jquery
• twitter-bootstrap

4 Answers 4

You need to modify the class on the i element. Also, you can do both cases in one go:

function playButtonPress() {
    $("#playbutton i").toggleClass("icon-stop icon-play");

    console.log("playButton pressed play was "+play);

    play = !play;
}

http://jsfiddle/Zxfn8/

You have to select the <i> element to change the class. For example like that:

$("#playbutton i").removeClass("icon-play").addClass("icon-stop");

Also you have icon-stop and icon-pause you have do decide on one of them.

Working fiddle.

And I think you don't need $("#playbutton").button('refresh');.

Since bootstrap initializes some of the elements when the document is ready you should have the pause button after the play button but hidden:

add this after your play button:

<button type="button" id="pauseButton" class="btn" onclick='playButtonPress()'><i class="icon-pause"></i></button>

add this in your CSS

#pauseButton{display:none;}

and your JS should look like this

  function playButtonPress() {
    if (!play) {
      $("#playbutton").hide();
      $("#pauseButton").show();
      play = true;
    } else {
      $("#pauseButton").hide()
      $("#playbutton").show();
      play = false;
    }
 }

In you're original code your changing the icon class on the button, you want to be changing the <i> tag.

Try this instead:

function playButtonPress() {
if (play == false) {
    $("#playbutton i").removeClass("icon-play").addClass("icon-pause");

    console.log("playButton pressed play was false show pause button");
    play = true;
} else {
    $("#playbutton i").removeClass("icon-pause").addClass("icon-play");
    console.log("playButton pressed play was true show play button");
    play = false;
} }

Updated Fiddle