Почему мой калькулятор ИМТ показывает неверный ИМТ?

Question

Я пытаюсь сделать калькулятор ИМТ. До вчерашнего дня она работала нормально, но затем перестала показывать правильный ИМТ. Я уверен, что все мои document.getElementById верны. Я попытался найти его в Google, но ничего не смог найти.

function convert() {
  var ft = document.getElementById("feetInput").value;
  var ftInches = ft * 12;
  var ftInchesSq = ftInches * ftInches;
  var inches = document.getElementById("inchInput").value;
  var inchesSq = inches * inches;
  var heightSquared = inchesSq + ftInchesSq;
  var pounds = document.getElementById("lbsInput").value;
  var bmi1 = pounds / heightSquared;
  var bmi2 = bmi1 * 703;
  var bmi = bmi2.toFixed(2);
  if (bmi < 18.5) {
    document.getElementById("outputBox").value = bmi + " - Underweight";
  }
  if (bmi > 18.51 && bmi < 24.99) {
    document.getElementById("outputBox").value = bmi + " - Normal weight";
  }
  if (bmi > 25 && bmi < 29.99) {
    document.getElementById("outputBox").value = bmi + " - Pre-obesity";
  }
  if (bmi > 30 && bmi < 34.99) {
    document.getElementById("outputBox").value = bmi + " - Obesity class 1";
  }
  if (bmi > 35 && bmi < 39.99) {
    document.getElementById("outputBox").value = bmi + " - Obesity class 2";
  }
  if (bmi >= 40) {
    document.getElementById("outputBox").value = bmi + " - Obesity class 3";
  }
}

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<div class="page">
  <header>
    <h1> BMI Calculator </h1>
  </header>
  <span> <u> Enter your height and weight </u> </span>
  <br><br>
  <input type="text" id="feetInput"> &nbsp;
  <span id="feet"> Feet </span>
  <br><br>
  <input type="text" id="inchInput"> &nbsp;
  <span id="inch"> Inch </span>
  <br><br>
  <input type="text" id="lbsInput"> &nbsp;
  <span id="lbs"> Pounds </span>
  <br><br>
  <button onclick="convert()"> Calculate </button>
  <br><br>
  <input type="text" id="outputBox" name="outputBoxName" disabled="disabled">
  <br>
</div>

Answer 1

Здесь, вероятно, есть следующие биты:

case (b > 18.51 && b < 24.99)

Я заметил, что в вашем коде есть несколько из них, и ваш синтаксис неправильный.

Вышеприведенное должно звучать так:

, поскольку то, что вы фактически написали, эквивалентно ((b> (18.51 && b)) <24.99), которое всегда будет возвращать «истину», поскольку (b> (18.51 && b)) разрешится в 0 или 1, что всегда меньше 24.99.

Изменить синтаксис для операторов case.

Answer 2

Рассмотрим следующий пример jQuery. С JavaScript вы можете сделать то же самое.

$(function() {
  function convert(f, i, p) {
    var ftInches = f * 12;
    var ftInchesSq = ftInches * ftInches;
    var inchesSq = i * i;
    var heightSquared = inchesSq + ftInchesSq;
    var bmi1 = p / heightSquared;
    var bmi2 = bmi1 * 703;
    return bmi2.toFixed(2);
  }

  function classify(b) {
    var rVal = b;
    switch (true) {
      case (b < 18.5):
        rVal += " - Underweight";
        break;
      case (b > 18.51 && b < 24.99):
        rVal += " - Normal weight";
        break;
      case (b > 25 && b < 29.99):
        rVal += " - Pre-obesity";
        break;
      case (b > 30 && b < 34.99):
        rVal += " - Obesity class 1";
        break;
      case (b > 35 && b < 39.99):
        rVal += " - Obesity class 2";
        break;
      case (b >= 40):
        rVal += " - Obesity class 3";
        break;
    };
    return rVal;
  }

  $("button").click(function() {
    var bmi = convert(parseInt($("#feetInput").val()), parseInt($("#inchInput").val()), parseInt($("#lbsInput").val()));
    $("#outputBox").val(classify(bmi));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<div class="page">
  <header>
    <h1> BMI Calculator </h1>
  </header>
  <span> <u> Enter your height and weight </u> </span>
  <br><br>
  <input type="text" id="feetInput"> &nbsp;
  <span id="feet"> Feet </span>
  <br><br>
  <input type="text" id="inchInput"> &nbsp;
  <span id="inch"> Inch </span>
  <br><br>
  <input type="text" id="lbsInput"> &nbsp;
  <span id="lbs"> Pounds </span>
  <br><br>
  <button> Calculate </button>
  <br><br>
  <input type="text" id="outputBox" name="outputBoxName" disabled="disabled">
  <br>
</div>

Разбейте шаги на простые в использовании функции. Входные значения всегда строковые, поэтому лучше всего конвертировать их в целочисленные при использовании математических операций.