Quiero evitar que se elijan valores negativos (<0) en el campo de entrada. Siendo "0" el valor más bajo disponible para el campo de entrada.
Aquí está el código javascript y html:
// Button functions const minusButton = document.getElementById('minus'); const plusButton = document.getElementById('plus'); const inputField = document.getElementById('amount'); minusButton.addEventListener('click', event => { event.preventDefault(); const currentValue = Number(inputField.value) || 0; inputField.value = currentValue - 0.01; }); plusButton.addEventListener('click', event => { event.preventDefault(); const currentValue = Number(inputField.value) || 0; inputField.value = currentValue + 0.01; }); // Returning 0 when clearing input const numInputs = document.querySelectorAll('input[type=number]') numInputs.forEach(function(input) { input.addEventListener('change', function(e) { if (e.target.value == '') { e.target.value = 0 } }) }) <button class="input-btn" id="minus">−</button> <button class="input-btn" id="plus">+</button> <input class="input" type="number" value="0" id="amount"/>Su código es casi correcto.
Nota: el controlador de eventos que agrega a la entrada para que se active al 'cambiar' solo se ejecuta cuando el usuario realiza manualmente el cambio en el valor del cuadro de entrada, y NO cuando se cambia por código (como lo está haciendo a través de minusButton y plusButton ). Dado que el usuario hace clic en el botón (y nunca interactúa directamente con la entrada), el evento ocurre en el botón, no en el cuadro de entrada.
Puede probar el siguiente código.
// Button functions const minusButton = document.getElementById("minus"); const plusButton = document.getElementById("plus"); const inputField = document.getElementById("amount"); minusButton.addEventListener("click", (event) => { event.preventDefault(); const currentValue = Number(inputField.value) || 0; // if less than 0, set to 0, else currentValue - 0.01 inputField.value = currentValue - 0.01 < 0 ? 0 : currentValue - 0.01; }); plusButton.addEventListener("click", (event) => { event.preventDefault(); const currentValue = Number(inputField.value) || 0; inputField.value = currentValue + 0.01; }); // Returning 0 when clearing input const numInputs = document.querySelectorAll('input[type="number"]'); numInputs.forEach((input) => { input.addEventListener("change", function (e) { if (e.target.value === "" || e.target.value < 0) { e.target.value = 0; } }); });Si estaba usando un botón de envío y el cuadro de entrada estaba en un elemento de formulario, podría haber usado el atributo min
<input class="input" type="number" value="0" id="amount" min="0" />Esta sería la forma ideal de front-end de hacerlo. También puede usar JavaScript, pero el usuario puede desactivarlo.
Sin embargo, debe verificar este valor (validación) cuando se envía, antes de usarlo porque incluso esto se puede omitir.
let newValue = currentValue - 0.01 if(newValue < 0) { newValue = 0 } inputField.value = newValue