Прерывистое значение из оператора if через диапазон ввода html

Question

У меня есть оператор if, который иногда возвращает правильное значение, а иногда нет.

Проблема может быть воспроизведена с помощью фрагмента ниже:

Для воспроизведения переместите ползунок к различным значениям. (см. скриншот)

Новая строка добавляется в таблицу при каждом изменении. Обратите внимание, что иногда результат ложен.

Почему он не возвращает истину каждый раз?

$("#inputRange").change(function() {
  $("#slideValue").val(this.value);
  if (isValidRange(this.value)) {
    console.log("Yes");
  } else {
    console.log("No");
  }
});

function isValidRange(range) {
  // get min and max value of input range
  var sliderMin = $("#inputRange").attr("min");
  var sliderMax = $("#inputRange").attr("max");
  var bResult = false;

  if (range >= sliderMin) {
    if (range <= sliderMax) {
      bResult = true;
    } else {
      bResult = false;
    }
  } else {
    bResult = false;
  }

  //  build new table row
  var sRow = "<tr><td>" + sliderMin + "</td>";
  sRow += "<td>" + sliderMax + "</td>";
  sRow += "<td>" + range + "</td>";
  sRow += "<td>" + bResult + "</td></tr>";

  $("#tableData").append(sRow);

  return bResult;
}

.container {
  margin:15px;
}

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

  <div class="form-group">
    <label for="slideValue">Value</label>
    <input id="slideValue" type="input" class="form-control col-2" />
  </div>
  <div id="sampleDiv">
    <div class="form-group">
      <input id="inputRange" type="range" min="1" max="21" step="1" value="200" data-thumbwidth="20">
    </div>
  </div>

  <table id="tableData" border="1">
    <tr>
      <td>Min</td>
      <td>Max</td>
      <td>value</td>
      <td>result</td>
    </tr>
  </table>

</div>

Answer 1

Значения sliderMin и sliderMax в вашем коде оцениваются как string вместо int.То есть sliderMin == "1" и sliderMax == "21".

Следовательно, когда входное значение равно "3", range <= sliderMax оценивается как ложное, поскольку "3" больше "2" (первый символ "21").

Чтобы исправить этоЯ бы конвертировал string в int используя parseInt.

$("#inputRange").change(function() {
  $("#slideValue").val(this.value);
  if (isValidRange(parseInt(this.value))) { // parseInt here
    console.log("Yes");
  } else {
    console.log("No");
  }
});

function isValidRange(range) {
  // get min and max value of input range
  var sliderMin = parseInt($("#inputRange").attr("min")); // parseInt here
  var sliderMax = parseInt($("#inputRange").attr("max")); // parseInt here
  var bResult = false;

  if (range >= sliderMin) {
    if (range <= sliderMax) {
      bResult = true;
    } else {
      bResult = false;
    }
  } else {
    bResult = false;
  }

  //  build new table row
  var sRow = "<tr><td>" + sliderMin + "</td>";
  sRow += "<td>" + sliderMax + "</td>";
  sRow += "<td>" + range + "</td>";
  sRow += "<td>" + bResult + "</td></tr>";

  $("#tableData").append(sRow);

  return bResult;
}

.container {
  margin:15px;
}

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

  <div class="form-group">
    <label for="slideValue">Value</label>
    <input id="slideValue" type="input" class="form-control col-2" />
  </div>
  <div id="sampleDiv">
    <div class="form-group">
      <input id="inputRange" type="range" min="1" max="21" step="1" value="200" data-thumbwidth="20">
    </div>
  </div>

  <table id="tableData" border="1">
    <tr>
      <td>Min</td>
      <td>Max</td>
      <td>value</td>
      <td>result</td>
    </tr>
  </table>

</div>