Простое условие JS работает через ZH

Question

Возникла странная проблема, простой if отрабатывается всегда. Мне нужно, чтобы если inputPoints.value становился больше inputPoints.max, то всегда получал его (inputPoints.max) значение. Однако почему-то вот это условие выполняется всегда.

    if (inputPoints.value > inputPoints.max)
    {
        inputPoints.value = inputPoints.max;
    }

вот нужный input и вся функция целиком:

<input id="a" type="number" min="1" max="10" onchange="valid()">

<script>
    function valid()
    {
        let inputPoints = document.getElementById("a");

        if (inputPoints.value < inputPoints.min)
        {
            inputPoints.value = inputPoints.min;
        }

        if (inputPoints.value > inputPoints.max)
        {
            inputPoints.value = inputPoints.max;
        }

        if (inputPoints.value % 1 != 0)
        {
            inputPoints.value = "";
        }
    }
</script>

Результат сейчас: в любой ситуации, когда inputPoints.value > 1, принимается значение 10, хотя должно только при inputPoints.value > 10.

Answer 1

Всё делло в том что вы сравниваете не числа, а строки. А при сравнении строк сравнивается по символьно и получается сравнение '2' и '10', а '2' больше чем '1'. Потому вам надо прежде преобразовать строчные значения в числовые:

const inputPoints = document.getElementById("a");
const inputPointsMax = +inputPoints.max;
const inputPointsMin = +inputPoints.min;

console.log(typeof inputPoints.value, typeof inputPoints.max);

function valid() {
  const currentValue = +inputPoints.value;

  if (currentValue < inputPointsMin) {
    inputPoints.value = inputPointsMin;
  }

  if (currentValue > inputPointsMax) {
    inputPoints.value = inputPointsMax;
  }

  if (currentValue % 1 != 0) {
    inputPoints.value = "";
  }
}

<input id="a" type="number" min="1" max="10" value="4" onchange="valid()">

БЛОГ НА HUSL

Простое условие JS работает через ZH

Ответы (1 шт):