'How to Increment Continuously while Button in Presses and is Down

Can you please take a look at this snippet and let me know that how I can 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>

javascript jquery

Solution 1:^[1]

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/[email protected]/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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to Increment Continuously while Button in Presses and is Down

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]