Сравнение входного значения в условии if

Question

Я пытаюсь включить / отключить кнопку ввода с простым условием if в jQuery, но каким-то образом if работает, но else if не будет работать. Я пытаюсь включить кнопку ввода в диапазоне от 0 до 40. Кнопка активируется при вводе числа выше 0, но не отключается, когда мне больше 40. Что я делаю неправильно?

$(document).ready(function() {
  $('#btn').prop('disabled', true);
  
  $('#temp').keyup(function() {
    if ($('#temp').val() > '40') {
      $('#btn').prop('disabled', true);
    } else if ($('#temp').val() > '0') {
      $('#btn').prop('disabled', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name='temperatur'> </input>
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter">
  </div>
</form>

Answer 1

Вы проводите сравнение string со строками цифр, что может быть удивительно. Например, "20" > "5" является ложным, потому что "5" больше, чем "2".

Я подозреваю, что именно это застает вас врасплох. Преобразование в число перед выполнением сравнения:

var value = +$("#temp").val();
// −−−−−−−−−^
if (value > 40) {
//          ^−−−−−− no quotes
   $('#btn').prop('disabled', true);
} else if (value > 0) {
// No quotes −−−−−−^
     $('#btn').prop('disabled', false);
}

Существует множество различных способов преобразования строк в числа. Выше я использую унарный +, но см. Мой ответ здесь для получения полного списка с плюсами и минусами.

---

Я должен отметить, что это кажется странным отключить вход при значении> 40, но включить его только при значении 1-39. Возможно

$("#btn").prop("disabled", +$("#temp").val() > 40);

Это отключит, когда значение> 40, включит, когда оно <= 40. </p>

Answer 2

Проблема в том, что val() возвращает строку, поэтому вы сравниваете строковые значения, а не целые значения. Таким образом, вы полагаетесь на неявное принуждение типов, которое может привести к странному поведению - как вы обнаружили.

Чтобы исправить это, используйте значения чисел c для условия, которые могут быть достигнуты с помощью целочисленные литералы и parseFloat(). Попробуйте это:

jQuery(function($) {
  let $btn = $('#btn').prop('disabled', true);

  $('#temp').keyup(function() {
    var value = parseFloat($(this).val()) || 0;
    $btn.prop('disabled', value <= 0 || value > 40);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name="temperatur" />
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter" />
  </div>
</form>

Answer 3

Вы не должны сравнивать значение string таким образом. Вместо этого сравните число, как показано ниже.

$(document).ready(function() {
     $('#btn').prop('disabled', true);
     
     $('#temp').keyup(function() {
        var temp = parseInt($('#temp').val());
        
        if(temp > 40) {
           $('#btn').prop('disabled', true);
        } else if(temp > 0) {
          $('#btn').prop('disabled', false);
        }

   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Temperatur in <strong>°C</strong>:</label>
<input type="number" id="temp"  name='temperatur'> </input>

<input type="submit"  id="btn" class="btn btn-info btn-lg" name = "button" value="Weiter" >