How to increment continuously while button in pressed and is down

Question

I am working on this snippet. How can I increment the index continuously when the #adder in clicked and pressed?

var index = 0;
$("#adder").on("click", function(){
  ++index;
   $("#res").html(index);
});

$("#adder").on("keydown", function(){
  ++index;
   $("#res").html(index);
});

$("#adder").on("keypress", function(){
  ++index;
   $("#res").html(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button type="button" class="btn btn-default" id="adder">+</button>
 <div id="res"> </div>

Does this answer your question? [Incrementing value continuously on mouse hold](https://stackoverflow.com/questions/28127507/incrementing-value-continuously-on-mouse-hold) — Pietro, Feb 02 '22 at 15:11

Terry Wei · Accepted Answer · 2018-06-21T03:10:47.980

3

Here is an example by using mousedown and mouseup event handler and use setInterval to do continuously adding index.

Edited

Recovered the click event handler that makes the index increase immediately after clicking.

Edited

Add a limit condition

var index = 0;
var interval;
var timeout;

// $("#adder").on("click", function(){
//  increase();
// });

$("#adder").on("mousedown", function(){
  increase();
  timeout = setTimeout(function(){
    interval = setInterval(function(){
      increase();
    }, 100);
  }, 500);
});

$("#adder").on("mouseup", function(){
  clearTimeout(timeout);
  clearInterval(interval);
});

function increase(){
    $("#res").html(++index);
    checkLimit();
}

function checkLimit(){
                   
    // here to check stop increasment
    if(index >= 50 ){
      // stop interval
      clearInterval(interval);
      // remove event handler
      $("#adder").off('click').off('mousedown').off('mouseup');
      return;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button type="button" class="btn btn-default" id="adder">+</button>
 <div id="res"> </div>

edited Jun 21 '18 at 03:10

answered Jun 21 '18 at 02:32

Terry Wei

1,521
8
16

Thanks a lots Terry, can you also let me know how can I set limit for this? I mean like 50 and stop after that even when the mouse is down. Also is this working on touch as well I mean the mousedown event? – Behseini Jun 21 '18 at 02:37
1

@Behseini, please only ask one question at a time. The answer you have been given seems like it answered your original question, so please accept and +1. – ecg8 Jun 21 '18 at 02:51
Thanks but there is one minor issue here. How can we prevent fast increment on single click? as you may notice this increments the number none stop even on lazy clicks – Behseini Jun 21 '18 at 02:59
like when I click once it increment to 4 or 6 on next click – Behseini Jun 21 '18 at 03:00
After removed the click event handler and enlarger the interval, it works smoothly as they should be. – Terry Wei Jun 21 '18 at 03:05
well I still need to keep the single increment as well – Behseini Jun 21 '18 at 03:07
Add the first time increment and `setTimeout` to trigger `setInterval` should solve your problem. – Terry Wei Jun 21 '18 at 03:12

Pietro · Answer 2 · 2022-02-10T09:35:29.847

I have started from your code to make one working with pure JavaScript and Bootstrap where you can add as many buttons and input fields as you like and get the max, min values from input fields. To sum up I have improved my code with autoincrement input values when button is pressed. I have further improved the code using onpointerdown, onpointerup, onpointerleave methods instead than onmousedown and onmouseup. In this way it will work on mobile devices as well.

function imposeMinMax(el) {
    if (el.value != '') {
        if (parseInt(el.value) < parseInt(el.min)) {
            el.value = el.min;
        }
        if (parseInt(el.value) > parseInt(el.max)) {
            el.value = el.max;
        }
    }
}


var index = 0;
var interval;
var timeout;
var stopFlag=false;

function clearAll(){
   clearTimeout(timeout);
   clearInterval(interval);
}


function modIn(el) {
   var inId = el.id;
   if (inId.charAt(0) == 'p') {
      var targetId = inId.charAt(2);      
      var maxValue = Number(document.getElementById(targetId).max);
      var actValue = Number(document.getElementById(targetId).value);
      index = actValue;
      if(actValue < maxValue){
         stopFlag=false;
         document.getElementById(targetId).value++;
      }else{
      stopFlag=true;
      }
      timeout = setTimeout(function(){
      interval = setInterval(function(){        
         if(index+1 >= maxValue){
            index=0;
            stopFlag=true;
         }  
         if(stopFlag==false){
            document.getElementById(targetId).value++;
         } 
         index++;
      }, 100);
      }, 500);      
   imposeMinMax(document.getElementById(targetId));
   }
   if (inId.charAt(0) == 'm') {
      var targetId = inId.charAt(2);
      var minValue = Number(document.getElementById(targetId).min);
      var actValue = Number(document.getElementById(targetId).value);
      index = actValue;
      if(actValue > minValue){
         stopFlag=false;
         document.getElementById(targetId).value--;
      }else{
         stopFlag=true;
      }
      timeout = setTimeout(function(){
         interval = setInterval(function(){        
            if(index-1 <= minValue){
               index=0;
               stopFlag=true;
            }  
            if(stopFlag==false){
               document.getElementById(targetId).value--;
            } 
            index--;
         }, 100);
         }, 500);      
      imposeMinMax(document.getElementById(targetId));
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button example</title>
  <meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>

  <button type='button' class='btn btn-danger btn-sm ' id='mbA' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>-</button>
  <input type='number' id='A'  onchange='imposeMinMax(this)' value='200' max='350' min='150' step='1' style='width: 50px;'>                 
  <button type='button' class='btn btn-danger btn-sm ' id='pbA' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>+</button>&nbsp;

  <button type='button' class='btn btn-danger btn-sm signBut' id='mbB' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>-</button>
  <input type='number'  id='B'  onchange='imposeMinMax(this)' value='250' max='450' min='150' step='1' style='width: 50px;'>                 
  <button type='button' class='btn btn-danger btn-sm ' id='pbB' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>+</button>&ensp;

  <button type='button' class='btn btn-danger btn-sm signBut' id='mbC' onmousedown='modIn(this)' onmouseup='clearAll()' onpointerleave='clearAll()'>-</button>
  <input type='number'  id='C'  onchange='imposeMinMax(this)' value='3' max='10' min='1' step='1' style='width: 50px;'>                 
  <button type='button' class='btn btn-danger btn-sm ' id='pbC' onmousedown='modIn(this)' onmouseup='clearAll()' onpointerleave='clearAll()'>+</button>

</body>



</html>

How to increment continuously while button in pressed and is down

2 Answers2

Linked