I have a button where I want the HTML and font-awesome icon to change on an odd number of clicks and revert back on an even number of clicks.

For example, I have a button named mute. If a user clicks on the button, I want the html to change to unmute and the font-awesome class to be replaced. If the user clicks on the button again I want the button to revert back to mute and so on.

This code should work and it does change the URL and the class. But it doesn't add the font-awesome initialization class fa.

When I inspect the element, I get this

<button id="mute" class="btn btn-primary fa-volume-off"> Mute</button>

With JQuery's addClass method you can add multiple classes by separating them with a space. Based on this, the element should be this

<button id="mute" class="btn btn-primary fa fa-volume-off"> Mute</button>

Here is my code

var clicks = 0;
    $("#mute").click(function() {
            clicks += 1;
            if (clicks % 2 === 1) {
                    $(this).html(" Un-mute");
                    $(this).addClass("fa fa-volume-up");
                    $(this).removeClass("fa fa-volume-off");
                    apiswf.rdio_setVolume(0);
            }
            else {
                $(this).html(" Mute");
                $(this).addClass("fa fa-volume-off");
                $(this).removeClass("fa fa-volume-up");
                apiswf.rdio_setVolume(100);
            }
    });

I do not understand why the fa class does not get added.

I have a button where I want the HTML and font-awesome icon to change on an odd number of clicks and revert back on an even number of clicks.

For example, I have a button named mute. If a user clicks on the button, I want the html to change to unmute and the font-awesome class to be replaced. If the user clicks on the button again I want the button to revert back to mute and so on.

This code should work and it does change the URL and the class. But it doesn't add the font-awesome initialization class fa.

When I inspect the element, I get this

<button id="mute" class="btn btn-primary fa-volume-off"> Mute</button>

With JQuery's addClass method you can add multiple classes by separating them with a space. Based on this, the element should be this

<button id="mute" class="btn btn-primary fa fa-volume-off"> Mute</button>

Here is my code

var clicks = 0;
    $("#mute").click(function() {
            clicks += 1;
            if (clicks % 2 === 1) {
                    $(this).html(" Un-mute");
                    $(this).addClass("fa fa-volume-up");
                    $(this).removeClass("fa fa-volume-off");
                    apiswf.rdio_setVolume(0);
            }
            else {
                $(this).html(" Mute");
                $(this).addClass("fa fa-volume-off");
                $(this).removeClass("fa fa-volume-up");
                apiswf.rdio_setVolume(100);
            }
    });

I do not understand why the fa class does not get added.

• javascript
• jquery
• html
• font-awesome
• addclass

Share Improve this question Follow asked Jun 1, 2015 at 18:33 Richard HamiltonRichard Hamilton 26.5k1111 gold badges6565 silver badges8888 bronze badges 2

• maybe not even add/remove the fa class at all? – Daemedeor Commented Jun 1, 2015 at 18:37
• Do you really need to count clicks? Wouldn't it be simpler to just call toggleClass on both classes on every click? – Avner Shahar-Kashtan Commented Jun 2, 2015 at 5:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The problem is you removing fa class with removeClass method immediately after adding it . Change to this :

$(this).removeClass("fa-volume-off");

Remove the class and then add the class. Swap the position of the two methods in both muting or unmuting

You are removeClass with fa in it after addClass

jsFiddle

var clicks = 0;
$("#mute").click(function() {
    clicks += 1;
    if (clicks % 2 === 1) {
        $(this).html(" Un-mute");
        $(this).removeClass("fa fa-volume-off");
        $(this).addClass("fa fa-volume-up");
        apiswf.rdio_setVolume(0);
    }
    else {
        $(this).html(" Mute");
        $(this).removeClass("fa fa-volume-up");
        $(this).addClass("fa fa-volume-off");
        apiswf.rdio_setVolume(100);
    }
});

Also, the removeClass both have fa even though you add fa every addClass... So should decide how you actually want to handle the fa.