How to make disabled button after some amount of clicks
Question
I have tried to disable my button once the user has clicked a button three times, using the following code:
var count = 0;
function clickFunc() {
count += 1;
var click = document.getElementById('clicks').innerHTML = count;
var btn = document.querySelector('.btn');
}
if(count >= 3) {
btn.disabled = true;
}
Why is my btn.disabled = true; statement never executed?
6 answers
solution1
1 2015-10-21 18:08:42
var count = 0;
function clickFunc() {
count += 1;
var click = document.getElementById('clicks').innerHTML = count;
var btn = document.querySelector('.btn');
if(count >= 3) {
btn.disabled = true;
}
}
clickFunc();
clickFunc();
clickFunc();
In the third call it will be disabled.
solution2
1 ACCPTED 2015-10-21 18:09:19
By moving the if statement inside the clickFunc() , it will be called every time the button is clicked and check it at that time. When writing code, try to run through it in your mind. If statements should be placed where they make the most logical sense.
var count = 0;
function clickFunc() {
count += 1;
var click = document.getElementById('clicks').innerHTML = count;
var btn = document.querySelector('.btn');
if(count >= 3)
btn.disabled = true;
}
solution3
1 2015-10-21 18:11:06
Here is a quick example.
$(document).ready(function() {
var count=0;
//called when button is clicked.
function clickFunc() {
count += 1;
//lets say id of button is btn
if(count>3){
$('#btn').prop('disabled', true);
}
}
});
or you can just move the if statement inside the function.
Hope that was any helpful!
solution4
1 2015-10-21 18:13:35
var count = 0; function clickFunc() { count += 1; var click = document.getElementById('clicks').innerHTML = count; var btn = document.querySelector('.btn'); if(count >= 3) { // placed inside the click function btn.disabled = true; } }
<div id="clicks">0</div> <br/> <button class="btn" onclick="clickFunc()">Click Me</button>
solution5
0 2015-10-21 18:19:53
Would you like to use it as a simple module? Are you using jQuery?
HTML
<body>
<button>Click!</button>
</body>
JS
var myCounter= (function() {
var clicksleft= 3;
var startCount= function(onFinish) {
var me= this;
clicksleft = clicksleft - 1;
if(clicksleft===0) {
onFinish();
}
};
return {
startCount: startCount
}
})();
jQuery(function ($) {
$('button').click(function() {
myCounter.startCount(function() {
$('button').attr('disabled','disabled');
});
});
});
solution6
-3 2015-10-21 18:45:56
<html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function(){ var count = 3, $btn = $('input[type="submit"]'); //Or which ever you want //Change the label of $btn $btn.val($btn.val()+' ('+count+')') $btn.click(function(){ $btn.val($btn.val().replace(count,count-1)); count--; if(count==0) { return !$btn.attr('disabled','disabled'); } }) }) </script> <title>Javascript</title> </head> <body> <input type="submit" value="Test"> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.