Jquery BMI 计算器未显示

Question

我正在尝试制作一个 BMI 计算器，但我无法将 BMI 数字或消息输出到他们的盒子中。我知道我要么遗漏了某些东西，要么其他东西是错误的，所以希望你能提供帮助。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>BMI Calculator</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="bmi.js"></script>
    </head>

    <body>
        <center>
        <form id="bmi">
            What is your weight (lbs)?
                <input class="calculations" type="text" name="weight" size="10" max="4"><br>
            What is your height (in)?
                <input class="calculations" type="text" name="height" size="10"><br>

            <input type="submit" id="calculateBMI" name="verify" value="Calculate BMI">
            <p>Your BMI:
                <input class="calculations" type="text" id="dopeBMI" size="10">
                <br>This Means:
                <input class="calculations" type="text" id="meaning" size="25">
            </p>
        </form>
        </center>
    </body>
</html>

$(document).ready(function(){
    $("bmi").click(function() {
        var weight = $("weight").value;
        var height = $("height").value;
        if (weight > 0 && height > 0) {
            var finalBmi = (weight / (height * height)) * 703;
            $("dopeBMI") = finalBmi;
            if (finalBmi < 18.5) {
                $("meaning").value = "You are underweight.";
            }
            if (finalBmi > 18.5 && finalBmi < 24.9) {
                $("meaning").value = "You are normal.";
            }
            if (finalBmi > 24.9 && finalBmi < 29.99) {
                $("meaning").value = "You are overweight.";
            }
        } else {
            $("meaning").value = "You are obese.";
            }   
    });
});

Answer 1

欢迎来到 SO 社区，看来您是 jquery 的新手，因此我希望您突出显示代码中的缺失点，以便您学习:)

1) Javascript 代码应包含在 "script" 标签下的正文中

2) 进一步研究 jquery select 或 - 要按 id select 元素，请使用 # - $("#bmi")

3) 因为它的形式使用提交功能而不是点击。

4) e.preventDefault() 防止表单提交的默认行为

5) Select 元素按名称或任何属性 - $("[name='weight']")

6) 要获取输入元素的值，请使用 val() 函数

7) 要将值设置为输入元素，请使用相同的 val("what ever the value")

可以在此处找到完整的工作示例。

$(document).ready(function(){
  $("#bmi").submit(function(e) {
   e.preventDefault();
   var weight = $("[name='weight']").val();
   var height = $("[name='height']").val();
   if (weight > 0 && height > 0) {
    var finalBmi = (weight / (height * height)) * 703;
    $("#dopeBMI").val(finalBmi);
    if (finalBmi < 18.5) {
     $("#meaning").val("You are underweight.");
    }
    if (finalBmi > 18.5 && finalBmi < 24.9) {
     $("#meaning").val("You are normal.");
    }
    if (finalBmi > 24.9 && finalBmi < 29.99) {
     $("#meaning").val("You are overweight.");
    }
   } else {
    $("#meaning").val("You are obese.");
    }   
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <center>
        <form id="bmi">
            What is your weight (lbs)?
                <input class="calculations" type="text" name="weight" size="10" max="4"><br>
            What is your height (in)?
                <input class="calculations" type="text" name="height" size="10"><br>

            <input type="submit" id="calculateBMI" name="verify" value="Calculate BMI">
            <p>Your BMI:
                <input class="calculations" type="text" id="dopeBMI" size="10" readonly>
                <br>This Means:
                <input class="calculations" type="text" id="meaning" size="25" readonly>
            </p>
        </form>
        </center>
    </body>

Jquery BMI 计算器未显示

Jquery BMI Calculator Not Displaying

jquery

calculator