Supongamos que tengo un elemento de entrada, en mi código html, de número de tipo y dos botones:

function downFunction(id) {
  let inputField = document.getElementById(id);
  // How to increment the value?
  log("Log from downFunction", inputField)
}

function upFunction(id) {
  let inputField = document.getElementById(id);
  // How to decrement the value?
  log("Log from upFunction", inputField)
}

function log(message, element) {
  console.log(message);
  console.log(element);
  console.log("\n");
}
<input type="number" id="inputFieldId" min="1" max="10" value="10">

<input type="button" id="downButton" onclick="downFunction('inputFieldId')" value="-"/>
<input type="button" id="upButton" onclick="upFunction('inputFieldId')" value="+" />

¿Crees que es posible aumentar / disminuir el valor de inputFieldId usando javascript, o eventualmente jQuery, respectivamente haciendo clic en upButton y downButton?

No me refiero a obtener el valor actual del campo y restablecer el nuevo valor después de realizar las operaciones ++ o --.
Me refiero al hacer clic directamente en los botones de flechas.

Para comprender mejor, hacer algo similar a esto (obviamente sé que este código no es correcto, es solo para aclarar mi intención):
let inputField = document.getElementById (id); inputField [0] .arrowUp.click (); inputField [0] .arrowDown.click ();

Gracias por la atención.

Respuesta aceptada

function downFunction(id) {
  let inputField = document.getElementById(id);
  inputField.stepDown()
}

function upFunction(id) {
  let inputField = document.getElementById(id);
  inputField.stepUp();
}

function log(message, element) {
  console.log(message);
  console.log(element);
  console.log("\n");
}
<input type="number" id="inputFieldId" min="1" max="10" value="10">

<input type="button" id="downButton" onclick="downFunction('inputFieldId')" value="-"/>
<input type="button" id="upButton" onclick="upFunction('inputFieldId')" value="+" />
1
Roberto Manfreda 9 may. 2019 a las 18:18

3 respuestas

La mejor respuesta

Puede usar los métodos stepUp y stepDown en input[type=number] HTMLElement

Documentación de StepUp Documentación de stepDown

function stepUp() {
  document.getElementById('input').stepUp();
}

function stepDown() {
  document.getElementById('input').stepDown();
}
<input id=input type=number min=1 max=10>
<button onclick="stepUp()">+</button>
<button onclick="stepDown()">-</button>
3
Neel Bhanushali 9 may. 2019 a las 15:25

Obtenga las coordenadas del botón arriba / abajo.

$('#upButton').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;
​
    console.log(xPos, yPos);
});

Haga clic en esas coordenadas.

var event = $.Event('click');
event.clientX = 12.796875;
event.clientY = 9;
$('.upButton').trigger(event);
0
shadow2020 9 may. 2019 a las 15:40

No podrá hacer clic programáticamente en las flechas de un input type="number" , pero no tiene que hacerlo porque eso no es lo que realmente quiere hacer. Lo que desea hacer es la misma acción que habría sucedido si el usuario hubiera hecho clic en esas flechas. Entonces, puede iniciar ese código usted mismo. En este caso, solo ajuste el value del elemento.

0
Scott Marcus 9 may. 2019 a las 15:23
56062658