J查询结果显示问题

Jquery result display issue

本文关键字：问题 显示 结果 查询      更新时间：2023-09-26

我正在尝试创建一个 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，为什么不使用它的实用工具来获取/设置值/内容

相关文章：