Script to correct input values set value always to max

July 3, 2022

I wrote a little script that checks 3 <input>‘s for their live value property and should correct them if the live value is higher or lower than the max or min attribute. However, the script also changes the value to the max as soon as a number is entered through the keyboard.

After a couple of hours of testing I still can’t figure out why the if-statement always triggers even when the entered live value is below the max-attribute and set it to the max.

document.querySelectorAll('input').forEach(inputListener => {
  inputListener.addEventListener('change', function() {
    //correct inputs if invalid values have been entered
    let active_input = ['#input-cage-width', '#input-cage-depth', '#input-bedding-data-height'];
    for (let i = 0; i < active_input.length; i++) {
      let value_input = document.querySelector(active_input[i]).value,
        min_input = document.querySelector(active_input[i]).min,
        max_input = document.querySelector(active_input[i]).max,
        element = document.querySelector(active_input[i]);
      if (value_input < min_input) {
        element.value = min_input;
      }
      if (value_input > max_input) {
        element.value = max_input;
      }
    }
  });
});

<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <input type="number" 
           id="input-cage-width"
        value="100"
          min="10"
          max="200">
  <input type="number" 
           id="input-cage-depth"
        value="50"
          min="10"
          max="100">
  <input type="number" 
           id="input-bedding-data-height"
        value="25"
          min="1"
          max="100">
</body>

>Solution :

Because you are dealing with strings and so the comparisons are string comparisons.

For example '55' > '200' returns true when we would expect it to return false.

To fix, replace the line that sets the min/max and value like this, by adding + in front of each value.

let value_input = +document.querySelector(active_input[i]).value,
                min_input = +document.querySelector(active_input[i]).min,
                max_input = +document.querySelector(active_input[i]).max,
                element = document.querySelector(active_input[i]);

The + would attempt to convert a string to a number.

When you input a value in the text box, the value is a String not a Number and therefore the comparisons are not what we expect.

So for example when you enter 55 in the box, that would actually be '55' (with quotes, meaning a string). The same for the max/min.

To see this, you can simply run if('55' > '200') console.log('55 larger than 200!!'); and it will actually show that.

This is the same as if('b' > 'a') console.log('blarger than a!!');

On the other hand, try if(+'55' > +'200') console.log('55 larger than 200!!'); (notice the +). This will not output anything because Number(55) is not larger than Number(200).