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选择器的更多信息 - 要按id选择元素，请使用＃ - $（“＃bmi”）

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

4）e.preventDefault（）以防止表单提交的默认行为

5）按名称或任何属性选择元素 - $（“[name ='weight']”）

6）要获取input元素的值，请使用val（）函数

7）要将值设置为输入元素，请使用相同的val（“任何值”）

完整的工作示例可以在这里找到。

$(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计算器未显示

1 个答案: