javascript - jQuery结果显示问题

我正在尝试创建一个bmi计算器，并尝试了以下方法。

$(document).ready(function() {
// Convert ft to inches
function convertHeight(ft) {
    return ft * 12;
}

// calculate total height
function showbmi() {
    var weight = document.getElementById('weight').value * 1;
    var height_ft = document.getElementById('height_ft').value * 1;
    var height_in = document.getElementById('height_in').value * 1;
    var height = convertHeight(height_ft) + height_in;
    var female_h = (height * height) / 30;
    var male_h = (height * height) / 28;
    var gender;
    var x = document.getElementsByName("gender");
    for (var i = 0; i < x.length; i++) {
        if (x[i].checked == true) {
            gender = x[i].value;
            break;
        }
    }
    var bmi = "?";

    if (gender == "female") {
        bmi = (Math.round((weight * 703) / (height * height)));
        if (isNaN(bmi)) bmi = "?";
    } else {
        bmi = (Math.round((weight * 703) / (height * height)));
        if (isNaN(bmi)) bmi = "?";
    }

    var bmi_msg = "?";
    if (bmi < 15) {

        bmi_msg = "Very severely underweight";

    } else if (bmi <= 16) {
        bmi_msg = "Severely underweight";

    } else if (bmi <= 18.4) {

        bmi_msg = "Underweight";

    } else if (bmi <= 24.9) {
        bmi_msg = "Normal";

    } else if (bmi <= 29.9) {
        bmi_msg = "Overweight";

    } else if (bmi <= 34.9) {
        bmi_msg = "Obese Class I (Moderately obese)";

    } else if (bmi <= 39.9) {
        bmi_msg = "Obese Class II (Severely obese)";

    } else {
        bmi_msg = "Obese Class III (Very severely obese)";

    }
    $("#result").text(bmi);
    return bmi;
    $("#comment").text(bmi_msg);
    return bmi_msg;

}
//bmi infos


//finish
$("form#calc input").bind("keydown", function() {
    setTimeout(function() {
        showbmi();
    }, 100);
    return true;
});
$("form#calc input").bind("change", function() {
    showbmi();
});
$("form#calc radio").bind("change", function() {
    showbmi();
});
$("form#calc").bind("submit", function() {
    showbmi();
    return false;
});
});

bmi正确显示，但是未显示消息forbmi值。我检查了控制台，它说代码无法访问。
有人可以向我指出错误的地方，以及如何改进此代码。

最佳答案

在设置result内容之后再设置注释之前，您将具有return语句，因此将永远不会执行$("#comment").text(bmi_msg);。

函数将在执行return语句后立即将控制权返回给调用方方法，因此在执行流程中应该只有一个return语句。

因此，从代码中删除return bmi;以使注释设置生效

$(document).ready(function() {
  // Convert ft to inches
  function convertHeight(ft) {
    return ft * 12;
  }

  // calculate total height
  function showbmi() {
      var weight = $('#weight').val() * 1;
      var height_ft = $('#height_ft').val() * 1;
      var height_in = $('#height_in').val() * 1;
      var height = convertHeight(height_ft) + height_in;
      var female_h = (height * height) / 30;
      var male_h = (height * height) / 28;
      var gender = $('input[name="gender"]:checked').val();
      var bmi = "?";

      if (gender == "female") {
        bmi = (Math.round((weight * 703) / (height * height)));
        if (isNaN(bmi)) bmi = "?";
      } else {
        bmi = (Math.round((weight * 703) / (height * height)));
        if (isNaN(bmi)) bmi = "?";
      }

      var bmi_msg = "?";
      if (bmi < 15) {

        bmi_msg = "Very severely underweight";

      } else if (bmi <= 16) {
        bmi_msg = "Severely underweight";

      } else if (bmi <= 18.4) {

        bmi_msg = "Underweight";

      } else if (bmi <= 24.9) {
        bmi_msg = "Normal";

      } else if (bmi <= 29.9) {
        bmi_msg = "Overweight";

      } else if (bmi <= 34.9) {
        bmi_msg = "Obese Class I (Moderately obese)";

      } else if (bmi <= 39.9) {
        bmi_msg = "Obese Class II (Severely obese)";

      } else {
        bmi_msg = "Obese Class III (Very severely obese)";

      }
      $("#result").text(bmi);
      $("#comment").text(bmi_msg);
      return bmi;

    }
    //bmi infos


  var timer;
  $("#calc input").bind("keydown change", function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      showbmi();
    }, 100);
    return true;
  });
  $("#calc").bind("submit", function() {
    clearTimeout(timer);
    showbmi();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calc">
  <input id="weight" />
  <input id="height_ft" />
  <input id="height_in" />
  <br />
  <input name="gender" type="radio" value="male" />
  <input name="gender" type="radio" value="female" />
  <br />
  <input type="submit" value="Check" />
  <div id="result"></div>
  <div id="comment"></div>
</form>

注意：由于您使用的是jQuery，为什么不使用其实用程序方法来获取/设置值/内容

关于javascript - jQuery结果显示问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35835522/