I want to prevent being able to choose a number less than zero with e.target.value

user_17854930 0
Viewed 41

I want to prevent negative values ( < 0) to be chosen on input field. Being "0" the lowest value available for the input field.

Here is the javascript and html code:

// 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"/>

input-field input html javascript
2 Answers

Your code is almost correct.

  1. In the minusButton event handler logic, you can enforce that the value never gets set to anything lower than 0.
  2. Edit the input event handler to check for values lower than 0, not equal to it.

Note: the event handler you add to input to fire upon 'change' only gets executed when the user manually makes the change to the value of input box, and NOT when it gets changed by code (as you're doing through minusButton and plusButton). Since, the user clicks the button (and never interact with the input directly), the event happens on the button, not the input box.

You can give below code a try.

// 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;
    }
  });
});

If you were using a submit button and the input box was in a form element, you could have used the min attribute

<input class="input" type="number" value="0" id="amount" min="0" />

This would be the ideal front-end way of doing it. You could use JavaScript too, but it can be disabled by the user.

You should, however, check this value (validation) when it gets submitted, before you use it because even this can be bypassed.

user_193659200 
let newValue = currentValue - 0.01
if(newValue < 0) {
  newValue = 0
}
inputField.value = newValue
user_194220210
Related