При нажатии, если значение внутри текста типа ввода больше 10, сделайте это

Question

Я пытаюсь отобразить сообщение для пользователя, если он вводит значение больше 10 внутри этого ввода.

Это поле ввода с кнопкой «вычислить»:

<div class="form__field">
    <label for="sd-property-value" class="form__label">Property Value: </label>
    <input type="text" id="sd-property-value" class="sd-property-value currency input-text" name="sd-calc" />
</div>

<div class="calculator-controls">
    <p><button id="sd-Calculate" class="button">Calculate</button></p>
</div>

Это jquery:

$('#sd-Calculate').on('click', function () {

    var checkInput = parseInt($('#sd-property-value').val());

        console.log('new clicker');
        console.log(checkInput);

    if (checkInput > 50) {
        console.log('more than');
        } else {
            console.log("less than");
        }
    });

Журнал консоли продолжает возвращать NaN.

Как я могу это исправить?

Answer 1

Я добавил div, который будет показывать сообщение пользователю, если значение больше 10 или если значение меньше 10, также будет показано сообщение.

Выполнить фрагмент ниже.

$('#sd-Calculate').on('click', function() {
  var checkInput = parseInt($('#sd-property-value').val());
  if (checkInput <= 10) {
$('#message').text('You must enter more then 10')
  } else if (checkInput > 10) {
$('#message').text('You value is more then 10')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form__field">
  <label for="sd-property-value" class="form__label">Property Value: </label>
  <input type="text" id="sd-property-value" class="sd-property-value currency input-text" name="sd-calc" />
</div>

<div class="calculator-controls">
  <p><button id="sd-Calculate" class="button">Calculate</button></p>
</div>

<div id="message"></div>

Answer 2

Вместо parseInt, не могли бы вы попробовать ниже

var checkInput = +($('#sd-property-value').val());

Это вернет ноль, если значение пустое. Но это будет NaN, если пользователь введет строку в поле ввода. Поэтому добавьте проверку NaN, как показано ниже

$('#sd-Calculate').on('click', function () {

        var checkInput = +($('#sd-property-value').val());

            console.log('new clicker');
            console.log(checkInput);

        if (!Number.isNaN(checkInput) && checkInput > 50) {
            console.log('more than');
            } else {
                console.log("less than");
            }
        });

Если вы хотите предотвратить ввод строки в текстовое поле, измените тип как 'number'

<input type="number" id="sd-property-value" class="sd-property-value currency input-text" name="sd-calc" />