How to change the button text on click for a short duration only using javascript?

Question

I'm making a shopping cart website and I want my Add to Cart button to say Item added upon clicking it, but only for like 2 seconds then it changes back to Add to Cart . How do I do achieve this?

Answer 1

In plain Javascript, you could use a variable for checking if the button is clicked and if not, set the button to the wanted string and change it back after two seconds.

document.getElementById('button').addEventListener('click', function (clicked) {
    return function () {
        if (!clicked) {
            var last = this.innerHTML;
            this.innerHTML = 'Item added';
            clicked = true;
            setTimeout(function () {
                this.innerHTML = last;
                clicked = false;
            }.bind(this), 2000);
        }
    };
}(false), this);

<button id="button">Add to Cart</button>

Answer 2

Try this:

$('button.add').click(function() {
    var self = $(this);
    if (!self.data('add')) {
        self.data('add', true);
        self.text('Item added');
        setTimeout(function() {
            self.text('Add to Cart').data('add', false);
        }, 2000);
    }
});