如何使用jQuery將數字輸入存儲到變量並執行計算以再次更新數字輸入？

Question

我正在使用HTML和jQuery制作BMI計算器。

<form id="bmicalc">
    <fieldset>
        <legend>BMI Calculator:</legend>
        <p>
            <label>Height:
                <input type="number" id="height1" min="3" max="7">ft
                <input type="number" id="height2" min="0" max="11">in</label>
        </p>
        <p>
            <label>Weight:
                <input type="number" id="weight" min="1" max="1400">lb</label>
        </p>
        <p>
            <label>BMI:
                <input id="bmi" type="number" min="1" max="200">
            </label>
        </p>
        <p>
            <input type="button" id="tehbaton" value="Check your BMI">
        </p>
    </fieldset>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js">
var height = $("#height1").val()*12 + $("#height2").val(); //Height in Inches
var weight = $("#weight").val();
$("#tehbaton").click(function(){
    $("#bmi").val(703*weight/(height^2));
});
</script>

這是小提琴： http : //jsfiddle.net/uzD9C/

我本來希望在keyup上執行該計算，但是我決定我不知道該怎么做。 因此，我現在很簡單，只需單擊“提交”按鈕即可更新第三個輸入字段。

但就目前而言，單擊按鈕不會執行任何操作。

計算BMI的公式為：BMI =（磅重/（英寸高x英寸高））x 703

Answer 1

嘗試這個：

$("#tehbaton").click(function () {
    if($("#height1").val() && $("#height2").val() && $("#weight").val()){
        var height = Number($("height1").val()) * 12 + Number($("height2").val());
        var weight = $("#weight").val();
        $("#bmi").val((703 * weight) / Math.pow(height,2));
    }
});

這是小提琴