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?
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?
Share Improve this question asked Sep 21, 2016 at 7:57 Harri CaceresHarri Caceres 793 silver badges8 bronze badges 2- Use setTimeOut in javascript – Sasikumar Commented Sep 21, 2016 at 7:58
- What should occur if button element is clicked again before two seconds has elapsed since first click? – guest271314 Commented Sep 21, 2016 at 8:02
6 Answers
Reset to default 4In 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>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);
}
});
- In 'Add To Cart' event handler change the button text to 'Item Added'
- In the same event handler use: setTimeout(makeTimeoutFunc(), 2000);
- In makeTimeoutFunc() change the button text to original value.
After click, button text will be changed and the button will also be disabled to prevent further actions, then reverted back after two seconds.
(function() {
$(".btn-addcart").on("click", function() {
var $this = $(this),
oldText = $this.text();
$this.text("Item added");
$this.attr("disabled", "disabled");
setTimeout(function() {
$this.text(oldText);
$this.removeAttr("disabled");
}, 2000);
});
})();<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="btn-addcart">Add to cart</button>Try This:
<input type="button" id="btn"/>
$("#btn").click(function(){
$(this).val("Item Added");
setTimeout(function(){ $("#btn").val("Add to Cart"); }, 2000);
});
Here is a version with only javascript, without jquery.
<body>
<input id ="button" type="button" value="add to cart" onclick=" tick(button)">
</body>
<script type="text/javascript">
function tick(button){
document.getElementById("button").value = "Item added";
setTimeout(() => (document.getElementById("button").value = "add to cart"), 2000);
}
</script>