Tengo dos tramos en los que se puede hacer clic que pueden aumentar y disminuir el número dentro de una entrada al guardar la operación dentro de ellos usando una identificación, luego hacer un bucle en ellos y hacer la operación usando eval() , quiero aumentar el número y disminuirlo mientras presiono no solo en clic (pulsación larga)
<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); }; });Debe usar el evento mousedown en lugar de click , y establecer un intervalo que cumpla con su lógica en algún momento.
Además, no estoy seguro de por qué está usando la propiedad id y no alguna propiedad data tal vez, este no es un uso seguro de esta propiedad. También debe usar detectores de eventos en lugar de agregar directamente la función en la propiedad.
<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) }); });¿Estás tratando de lograr algo como esto?
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>