I have a form button with an onclick event that runs a simple javascript function (adds 1 to a value).

I have to click the mouse button each time for this to run, is there any way of making it so if the mouse button is held down it runs it too, but every half a sec?

CURRENT CODE

<script>
  function incrementValue(id) {
    var value = parseInt(document.getElementById(id).innerHTML);
    value=++; 
    document.getElementById(id).innerHTML = value;
    }
</script>

html

<input type="text" id="attk">
<input type="text" id="def">

<input type="button" onclick="incrementValue('attk')">
<input type="button" onclick="incrementValue('def')">

I have a form button with an onclick event that runs a simple javascript function (adds 1 to a value).

I have to click the mouse button each time for this to run, is there any way of making it so if the mouse button is held down it runs it too, but every half a sec?

CURRENT CODE

<script>
  function incrementValue(id) {
    var value = parseInt(document.getElementById(id).innerHTML);
    value=++; 
    document.getElementById(id).innerHTML = value;
    }
</script>

html

<input type="text" id="attk">
<input type="text" id="def">

<input type="button" onclick="incrementValue('attk')">
<input type="button" onclick="incrementValue('def')">

• javascript
• onclick

• 1 tip : use radix like parseInt('watever',10) – xkeshav Commented Feb 8, 2012 at 12:35

4 Answers 4

The following will repeat every 500ms while the button is pressed - and will increment a counter

JavaScript:

var intervalId; // keep the ret val from setTimeout()
function mousedownfunc(divid) {
    intervalId = setInterval(runme, 500, divid);
}

function mouseupfunc() {
    clearInterval(intervalId);
}

function runme(divid) {
    document.getElementById(divid).innerHTML = parseFloat(document.getElementById(divid).innerHTML) + 1;
}

HTML :

<input type="button" onmousedown="mousedownfunc('counter')" value="clickme" onmouseup="mouseupfunc('counter')" /><br/>
<div id="counter">1</div>

Working example with counter -> http://jsfiddle/73uKk/1/

You can add an onmousedown event(http://www.w3schools./jsref/event_onmousedown.asp) to the button.
Then use setTimeout() function (http://www.w3schools./jsref/met_win_settimeout.asp)

<input type="submit" onmousedown="func1">


function func1(){  
  //yourcode;  
setTimeout(func1,500);
}

Not sure about the right syntax in setTimout.

You can do something like this in JQuery:

var myInterval = null,
counter = 0;

            $('#buttonID').mousedown(function(){
                myInterval = setInterval(function(){
                    counter++;
                    // display it on page...
                },500);
            });

            $('#buttonID').mouseup(function(){
                clearInterval(myInterval)
            });

Define an interval in mousedown and when the mouse click is release (mouseup) clear that interval. I hope that will be helpful

you can use Javascript Closure

var i = 1;
var callMe = function ()
{
    var called = function(){ var j = i++; alert ('now its:'+j); }
    return called();   
}
setInterval(callMe,500);

see more