Increase and decrease number while pressing-CodePudding

I have two clickable spans that can increase and decrease number inside a input by saving the opreation inside them using an id then loop on them and do the opreation using eval() , i want to increase the number and decrease it while pressing not only on click (Long Press)

 <span id="--">-</span>
 <input  type="number" max="50" value="0" min="1" disabled />
 <span id="  "> </span>

let num = document.querySelector(".num");
let controllers = document.querySelectorAll(".control span");

controllers.forEach((c) => {
  c.onclick = function (e) {
    let op = e.target.id;

    eval("num.value"   op);

  };
});

CodePudding user response：

You should use the mousedown event instead of click, and set some interval that does your logic at some rate of time.

Also I'm not sure why you're using the id property and not some data property maybe, this isn't a safe usage of this property. Also you should use event listeners instead of directly adding the function on the property.

 <span data-op="--">-</span>
 <input  type="number" max="50" value="0" min="1" disabled />
 <span data-op="  "> </span>

let num = document.querySelector(".num");
let controllers = document.querySelectorAll(".control span");

controllers.forEach((c) => {
  let interval
  c.addEventListener('mousedown',function (e) { // mouse down - start ticking
    let op = e.target.getAttribute('data-op'); // get data property
    interval = setInterval(() => {
      eval("num.value"   op);
    }, 100) // set interval tick time here
  });

  c.addEventListener('mouseup',function (e) { // mouse up - stop ticking
    clearInterval(interval)
  });
});

CodePudding user response：

Are you trying to achieve something like this?

let score = 0;
let status = false;
const scoreEl = document.querySelector('#score');
const btnEl = document.querySelector('#btn');
let interval = null;

btnEl.addEventListener('mousedown', e => {
  status = true;
  update();
});

btnEl.addEventListener('mouseup', e => {
  status = false;
  update();
});

const update = () => {
  if (status) {
    interval = setInterval(() => {
      score  ;
      scoreEl.innerHTML = score;
    }, 100);    
  } else {
    if (interval) clearInterval(interval);
  }
  
}

<div id="score">0</div>
<button id="btn">Increment</button>