How to constantly increase or decrease values in JavaScript
On mouse click and hold on the plus element, I want to increase or decrease the values, it works, but does not work with mouse hold
var salainv = document.getElementById("sala").value;
var bodegainv = document.getElementById("bodega").value;
function incrementar() {
document.getElementById("sala").value = salainv++;
document.getElementById("bodega").value = bodegainv--;
}
function decrementar() {
document.getElementById("sala").value = salainv--;
document.getElementById("bodega").value = bodegainv++;
}
<input type="number" name="bodega" id="bodega" value="15">
<input type="number" name="sala" id="sala" value="5">
<img src="https://cdn.pixabay.com/photo/2012/04/13/00/21/plus-31216_960_720.png" style="width: 40px;" onClick="incrementar()">
<img src="http://images.clipartpanda.com/minus-clipart-RTA7dagTL.png" style="width: 40px;" onClick="decrementar()">
Can anyone help me get it to work on mouse click?
Thank.
+3
source to share
2 answers
You can use setInterval
as below along with events onMouseDown
andonMouseUp
var salainv = document.getElementById("sala").value;
var bodegainv = document.getElementById("bodega").value;
var timerId;
function incrementar() {
document.getElementById("sala").value = salainv++;
document.getElementById("bodega").value = bodegainv--;
}
function beginIncrementar(){
timerId = setInterval(incrementar,200);
}
function endIncrementar(){
clearInterval(timerId)
}
function decrementar() {
document.getElementById("sala").value = salainv--;
document.getElementById("bodega").value = bodegainv++;
}
function beginDecrementar(){
timerId = setInterval(decrementar,200);
}
function endDecrementar(){
clearInterval(timerId)
}
<input type="number" name="bodega" id="bodega" value="15">
<input type="number" name="sala" id="sala" value="5">
<img src="https://cdn.pixabay.com/photo/2012/04/13/00/21/plus-31216_960_720.png" style="width: 40px;" onClick="incrementar()" onMouseDown="beginIncrementar()" onMouseUp="endIncrementar()">
<img src="http://images.clipartpanda.com/minus-clipart-RTA7dagTL.png" style="width: 40px;" onClick="decrementar()" onMouseDown="beginDecrementar()" onMouseUp="endDecrementar()">
+4
source to share
Use setInterval () and clearInterval ()
on events onmousedown
and onmouseup
. See example below.
var salainv = document.getElementById("sala").value;
var bodegainv = document.getElementById("bodega").value;
var timer;
function incrementar() {
document.getElementById("sala").value = salainv++;
document.getElementById("bodega").value = bodegainv--;
}
function decrementar() {
document.getElementById("sala").value = salainv--;
document.getElementById("bodega").value = bodegainv++;
}
function mouseDown(v) {
if (v == 'inc')
timer = setInterval(incrementar, 100);
else
timer = setInterval(decrementar, 100);
}
function mouseUp(v) {
clearInterval(timer);
timer = null;
}
<input type="number" name="bodega" id="bodega" value="15">
<input type="number" name="sala" id="sala" value="5">
<img src="https://cdn.pixabay.com/photo/2012/04/13/00/21/plus-31216_960_720.png" style="width: 40px;" onClick="incrementar()" onmousedown="mouseDown('inc')" onmouseup="mouseUp('inc')">
<img src="http://images.clipartpanda.com/minus-clipart-RTA7dagTL.png" style="width: 40px;" onClick="decrementar()" onmousedown="mouseDown('dec')" onmouseup="mouseUp('dec')">
0
source to share