Javascript increment value faster with mouse hold

Question

I have this script that adds 1 to a value every time I click on a button:

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

<button onclick="incrementValue('skill_1')"> add </button><br>
<span id=skill_1>0</span>

However I want to adjust it so that if I hold down the mouse button, it'll repeat so I don't have to keep pressing it over and over.

Any way to do that using javascript? Or would jquery suit?

There are the `onmousedown` and `onmouseup` event handlers. I'm sure you can do something with that: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown Perhaps also look at `onmouseout`. — KIKO Software, Jan 25 '18 at 11:53

Rory McCrossan · Accepted Answer · 2018-01-25T13:18:14.643

8

To achieve this you need to use the mousedown event to start a timeout (which is the delay before the incremental count starts) and an interval (which does the repeated counting). You'll also need a mouseup and mouseleave handler to remove both of those timers. Try this:

var timeout, interval;

[].forEach.call(document.querySelectorAll('.add'), function(button) {
  button.addEventListener('mousedown', function() {
    var id = button.dataset.target;
    incrementValue(id);
    
    timeout = setTimeout(function() {
      interval = setInterval(function() {
        incrementValue(id);
      }, 50);    
    }, 300);
  });
  
  button.addEventListener('mouseup', clearTimers);
  button.addEventListener('mouseleave', clearTimers); 
  
  function clearTimers() {
    clearTimeout(timeout);
    clearInterval(interval);
  }
});

function incrementValue(id) {
  var el = document.getElementById(id);
  var value = parseInt(el.textContent, 10);
  document.getElementById(id).textContent = ++value;
}

<button class="add" data-target="skill_1">add</button><br />
<span id="skill_1">0</span>

edited Jan 25 '18 at 13:18

answered Jan 25 '18 at 12:00

Rory McCrossan

331,213
40
305
339

Works a treat, thanks – user1022585 Jan 25 '18 at 12:24
Watch out though. If you mouse down over the button, drag the mouse outside the button, then mouse up, it will increment forever. – DJDaveMark Jan 25 '18 at 13:03
@user1022585 I edited the answer with a simple solution to avoid incrementing forever by listening to two mouse events `'mouseup mouseleave'` – DJDaveMark Jan 25 '18 at 13:09
1

@DJDaveMark Very good point, thanks for letting me know. Just FYI I amended your edit slightly as you can't assign multiple events in `addEventListener()` – Rory McCrossan Jan 25 '18 at 13:14
@RoryMcCrossan Yeah, I forgot to take my jQuery googles off, and you beat me editing my own edit. – DJDaveMark Jan 25 '18 at 13:15

Ori Drori · Answer 2 · 2021-03-05T10:57:42.927

You'll need 3 event handler:

mousedown that will call a function, that will call itself with a timeout (continuosIncerment) while the mouse button is pressed.
mouseup that will clear the timeout when the button is released.
mouseleave that clears the timeout when the mouse leaves the button area.

const btn = document.querySelector('#btn');
const skill_1 = document.querySelector('#skill_1');
let value = 0;
let timer;

function continuosIncerment() {
  skill_1.innerHTML = ++value;
  
  timer = setTimeout(continuosIncerment, 200);
}

function timeoutClear() {
  clearTimeout(timer);
}

btn.addEventListener('mousedown', continuosIncerment);

btn.addEventListener('mouseup', timeoutClear);

btn.addEventListener('mouseleave', timeoutClear);

<button id="btn"> add </button><br>
<span id="skill_1">0</span>

score 3 · Answer 3 · answered Jan 25 '18 at 11:57

Instead of reading the value from the HTML, then writing it back, it's easier to hold the value in a variable, increment it, then write it out.

Did you know you can do this with a simple HTML spinner?

<input type="number" min="0" max="50" step="1">

Cirou · Answer 4 · 2020-01-02T10:57:10.847

0

I'd go with a solution like this: on mouse down event starts a repeating timer that triggers your function and it stops when the mouse up event occurs.

var inter = null;

function setInter(){   
    inter=setInterval(incrementValue, 500);
}

function unsetInter(){
    clearInterval(inter);
}

function incrementValue() {
   var value = parseInt(document.getElementById('skill_1').innerHTML);
   value = value + 1;
   document.getElementById('skill_1').innerHTML = value;
}

<button 
onmousedown="setInter()"
onmouseup="unsetInter()"> add </button>
<br>
<span id=skill_1>0</span>

edited Jan 02 '20 at 10:57

answered Jan 25 '18 at 11:59

Cirou

1,420
12
18

Doens't work.... – Liam Jan 25 '18 at 12:00
Edit, now it works, sorry – Cirou Jan 02 '20 at 10:57

Javascript increment value faster with mouse hold

4 Answers4

Linked