Question: 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 commented 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.com/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.net/Bwxb9/>

Answer: 
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](http://jsfiddle.net/arunpjohny/76y9Z/)

Updated: as suggested by Andy, but I would recommend 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](http://jsfiddle.net/76y9Z/1/)
The 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');

```