Question

I’m trying to change the text of a button with the following code.

// hide unavailable courses
$("#availability_button").click(function () {
    $(".availability_red").toggle();
        if ($(this).val('Show Unavailable')){
            $(this).html('Hide Unavailable');
        } else {
            $(this).html('Show Unavailable');
        }
});

The button text changes the first time I use it, but never again. Not sure why that is and I have pretty much hit the limits of my JS debugging knowledge.

I put an alert into it and proved it never reaches down to the else path.

What am i doing wrong?

Answer 1

It always evaluates to true because .val(val) returns the jQuery object and objects are truthy (ToBoolean gives true) values.

Also, you are using .val() whereas you probably want to check the .html()

Try this:

if ($(this).html() === 'Show Unavailable') {
    $(this).html('Hide Unavailable');
} else {
    $(this).html('Show Unavailable');
}

Demo http://jsfiddle.net/jfetf/