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 class="num" 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);
};
});
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 class="num" 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)
});
});
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>