javascript onclick repeat - Stack Overflow

admin管理员组

文章数量:1344558

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

Share Improve this question Follow edited Feb 8, 2012 at 12:32 user1022585 asked Feb 8, 2012 at 12:07 user1022585user1022585 13.7k2323 gold badges5858 silver badges7676 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

本文标签： javascript onclick repeatStack Overflow