What is wrong with the line in the header?
The below example is supposed to make a button which will increment a counter each time it is clicked. However, I enforce a delay of 2000 ms between button clicks. The version below works, however, if I use the mented out line instead of
document.getElementById("rollButton").onclick=function(){calculation()};
(both in function afterWaiting())
I get various odd results, for instance that the counter starts incrementing by a lot more than 1, and the waiting time disappears?
<!DOCTYPE html>
<html>
<head>
<script src=".8.3/jquery.min.js"></script>
<script>
function afterWaiting()
{
$("#rollButton").css("color","black");
//$("#rollButton").click(function(){calculation()});
document.getElementById("rollButton").onclick=function(){calculation()};
}
var counter=0;
function calculation()
{
////Enforcing wait:
document.getElementById("rollButton").style.color="red";
document.getElementById("rollButton").onclick="";
window.setTimeout("afterWaiting()",2000);
counter=counter+1;
document.getElementById("test").innerHTML=counter;
}
</script>
</head>
<body>
<button type="button" onclick="calculation()" id="rollButton"> Roll! </button>
<p id="test"> </p>
</body>
</html>
What have I misunderstood?
thanks in advance :)
JSFiddle: /
What is wrong with the line in the header?
The below example is supposed to make a button which will increment a counter each time it is clicked. However, I enforce a delay of 2000 ms between button clicks. The version below works, however, if I use the mented out line instead of
document.getElementById("rollButton").onclick=function(){calculation()};
(both in function afterWaiting())
I get various odd results, for instance that the counter starts incrementing by a lot more than 1, and the waiting time disappears?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function afterWaiting()
{
$("#rollButton").css("color","black");
//$("#rollButton").click(function(){calculation()});
document.getElementById("rollButton").onclick=function(){calculation()};
}
var counter=0;
function calculation()
{
////Enforcing wait:
document.getElementById("rollButton").style.color="red";
document.getElementById("rollButton").onclick="";
window.setTimeout("afterWaiting()",2000);
counter=counter+1;
document.getElementById("test").innerHTML=counter;
}
</script>
</head>
<body>
<button type="button" onclick="calculation()" id="rollButton"> Roll! </button>
<p id="test"> </p>
</body>
</html>
What have I misunderstood?
thanks in advance :)
JSFiddle: http://jsfiddle/Bwxb9/
Share Improve this question edited Feb 23, 2013 at 13:44 frenchie 52k117 gold badges319 silver badges527 bronze badges asked Feb 23, 2013 at 13:33 KaareKaare 5311 gold badge7 silver badges27 bronze badges 2- Can you please a JS fiddle , and what does the console says – Seder Commented Feb 23, 2013 at 13:34
- I'm running it through the browser, which doesn't make any plaints? – Kaare Commented Feb 23, 2013 at 13:39
3 Answers
Reset to default 3The difference is that when you apply event handlers through onclick as you do in your original version, you can only bind one handler to the element. And using onclick="" kind of clears it.
When using jQuery .click(handler) you bind a new handler each time you call it (and you can unbind it with unbind('click') (and not with onclick=""). So after a couple of calls to afterWaiting you have applied mulitple click handlers on your element, and on each click the calculation function runs multiple times..
So, one way to correct it is to replace
document.getElementById("rollButton").onclick="";
with
$('#rollButton').unbind('click');
The only code required is
<button type="button" id="rollButton"> Roll! </button>
<p id="test"> </p>
var counter = 0;
var $test = $('#test');
var $rollButton = $('#rollButton');
function increment(){
$test.html(counter++);
$rollButton.off('click', increment);
setTimeout(function(){
$rollButton.on('click', increment);
}, 2000);
}
$rollButton.on('click', increment);
Demo: Fiddle
Updated: as suggested by Andy, but I would remend Andy's answer as it involves no additional event manipulation
var counter = 0;
var $test = $('#test');
var $rollButton = $('#rollButton');
function increment(){
$test.html(counter++);
setTimeout(function(){
$rollButton.one('click', increment);
}, 2000);
}
$rollButton.one('click', increment);
Demo: Fiddle
That's generally a bit of an odd and confusing approach. Here's how i'd do it, without mixing jquery and pure js (onclick) too much:
http://jsfiddle/LGvKS/
var wait = false;
counter = 0;
$('button').click(function(){
if(!wait){
$('span').text(++counter);
wait=true;
setTimeout(function(){
wait=false;
},2000);
}
});