javascript onclick repeat

Question

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')">

tip : use radix like parseInt('watever',10)

xkeshav
– xkeshav

2012-02-08 12:35:51 +00:00
Commented Feb 8, 2012 at 12:35 — xkeshav
– xkeshav, Commented Feb 8, 2012 at 12:35

Manse · Accepted Answer · 2012-02-08 12:36:55Z

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.net/73uKk/1/

edited Feb 8, 2012 at 12:36

answered Feb 8, 2012 at 12:19

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1022585 Over a year ago

In my code I have different counters, each one is assigned an id eg runme(id), could you edit code to show that? thanks

Manse Over a year ago

@user1022585 if you add your current code to your question I will update my answer .... ta

user1022585 Over a year ago

its working now, just one final little issue, it only updates if i hold it down, not if i click. Would the mouseup function need to be adjusted to do this or could i just add an onclick event to the button too?

Chasseur Over a year ago

You need to add handling for mouse-leave, for cases the user moves the pointer outside the button and then releases.

MikeTeeVee Over a year ago

I rewrote your example to give a longer pause before the first increment and to reset when moving the mouse off the element while still holding down the click. jsfiddle.net/73uKk/216

lvil · Accepted Answer · 2012-02-08 12:15:05Z

1

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

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


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

Not sure about the right syntax in setTimout.

answered Feb 8, 2012 at 12:15

lvil

4,3169 gold badges52 silver badges79 bronze badges

Comments

wasimbhalli · Accepted Answer · 2012-02-08 12:28:43Z

1

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

answered Feb 8, 2012 at 12:28

wasimbhalli

5,2628 gold badges48 silver badges63 bronze badges

Comments

xkeshav · Accepted Answer · 2012-02-08 12:34:38Z

0

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

answered Feb 8, 2012 at 12:34

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Collectives™ on Stack Overflow

javascript onclick repeat

CURRENT CODE

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

CURRENT CODE

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related