简单文本字段计算不起作用

时间:2016-05-05 13:01:17

标签: javascript html css text

我已经相当远,这似乎是一个简单的计算,但由于某种原因,我的代码并没有产生我需要的结果。

我正在尝试创建一个执行以下操作的计算器。用户输入他们的体重和体脂百分比。他们还输入了建议的每日水比和每日蛋白质比率。

接下来,计算器将输入的体重和体脂百分比乘以得到脂肪的重量lbs,然后它将减去重量并减去脂肪的重量lbs来得瘦体质量。

接下来,它将采取瘦体重并乘以建议的每日水比率来计算每日饮水量。

最后,它将采取瘦体重并将其乘以推荐的每日蛋白质比率来计算每日蛋白质摄入量。

这是我到目前为止所做的。

非常感谢任何帮助。感谢

<!DOCTYPE html>

<html>


<head>
<title>Dr. Kosimides Lean Body Academy Calculator</title>


<style type = "text/css">
    body
    {
        background:#FFC;
    }

    div
    {
        border:2px solid #F69;
        padding:10px 40px;
        background:#FCC;
        width:600px;
        border-radius:20px;
        box-shadow: 10px 10px 2px #CCC;
        text-align: center;
        margin-right:auto;
        margin-left:auto;
    }

    h1
    {
        color:#F06
        text-align:center;
    }

    </style>
    </head>

    <body>

        <div>
        <form>
            <h1>LBA Calculator</h1>
            <br />
            <label> Weight
                    <input type="text" name="weight" id="weight" /> (lbs)
            </label>
            <label> Body Fat
                    <input type="text" name="bodyfat" id="bodyfat" /> (%)
            </label>
            <br />
            <br />
             <label> Protein
                    <input type="text" name="protein" id="protein" />
            </label>
            <br />
             <label> Water
                    <input type="text" name="water" id="water" />
            </label>
            <br />
            <br />
             <label> Pounds of Body Fat
                    <input type="text" name="lbf" id="lbf" />
            </label>
            <br />
            <br />
            <label> Lean Body Mass
                    <input type="text" name="lbm" id="lbm" />
            </label>
            <br />
            <br />
            <label> Daily Water Intake
                    <input type="text" name="dwi" id="dwi" />
            </label>
            <br />
            <br />
            <label> Daily Protein Intake
                    <input type="text" name="dpi" id="dpi" />
            </label>
            <input type="button" name="Calculate" value="Calculate" onClick="LBAcalc()" />
            <input type="reset" name="Reset" value="reset" />
        </form>
        </div>

        <script>

            function LBAcalc()
            {


                     // Get The Input

                    var w_txt = document.getElementById('weight');
                    var bf_txt = document.getElementById('bodyfat');
                    var p_txt = document.getElementById('protein');
                    var h20_txt = document.getElementById('water');


                     // Convert To Numbers If Needed

                    var w = parseInt(w_txt.value);
                    var bf = parseInt(bf_txt.value);
                    var p = parseInt(p_txt.value);
                    var h20 = parseInt(h20_txt.value);


                    // Convert body fat to percentage

                    bf = bf / 100;


                    // Validate Inputs

                    var errMsg = "";

                    if (w <= 0)
                      errMsg = errMsg + "*Weight cannot be negative \n";

                    if (w == "")
                      errMsg = errMsg + "*Weight must be entered \n";

                    if ( bf <= 0)
                      errMsg = errMsg + "*Body Fat cannot be negative \n";     


                    // If Error Inform User

                    if (errMsg != "")

                        alert(errMsg);

                    else


                    // If No Error Process and Display Results

                    var result = document.getElementById ('lbf');
                    var myResult = w * bf;
                    result.value = myResult.toFixed(1);

                    var result1 = document.getElementById ('lbm');
                    var myResult1 = w - myResult;
                    result1.value = myResult1.toFixed(1);

                    var result2 = document.getElementById ('dwi');
                    var myResult2 = w * myResult1;
                    result2.value = myResult2.toFixed(1);

                    var result3 = document.getElementById ('dpi');
                    var myResult3 = myResult * p;
                    result3.value = myResult3.toFixed(1);


            }



        </script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

到目前为止你所拥有的一切都没问题。只有问题是,您忘了在else

中包含多个项目
else {
  // If No Error Process and Display Results

  var result = document.getElementById ('lbf');
  var myResult = w * bf;
  result.value = myResult.toFixed(1);

  var result1 = document.getElementById ('lbm');
  var myResult1 = w - myResult;
  result1.value = myResult1.toFixed(1);

  var result2 = document.getElementById ('dwi');
  var myResult2 = w * myResult1;
  result2.value = myResult2.toFixed(1);

  var result3 = document.getElementById ('dpi');
  var myResult3 = myResult * p;
  result3.value = myResult3.toFixed(1);
}

如果您没有多个陈述,那就完全可以了。就像你之前的if语句中的方式一样。但是当有多个时,您需要使用{ }来封闭它们。如果不是,它将仅执行else条件的第一个语句,并在第一个语句之后执行所有语句,而不管条件如何。