0

我是编程的新手。我已经在 Codecademy for JavaScript 上做了一段时间的练习，但显然有很多我仍然不知道/不理解。我在那些练习中写了一些东西，但没有任何人拥有或实际使用的东西。我本来打算再保持这种状态的，但今天工作中有机会做点小事，我想挑战自己，所以我决定尝试一下。

这个想法是创建一个表格，人们可以在其中输入他们的基本信息，并让它为他们设定一个符合他们减肥目标的每日卡路里量。它基于基础代谢率、哈里斯本尼迪克特方程，并稍加改动以适应我公司的特定程序。

我能够在 Dreamingincode 上找到一个基本 BMR 计算器的 Javascript，然后我对其进行了修改以进行我们需要的调整。在这个过程中的某个地方，出现了问题。当我将文件保存为 .html 文件然后在浏览器中打开它时，会出现表单，您可以填写所有内容，但是当您单击按钮时，它只会刷新屏幕。

我知道这对所有真正知道自己在做什么的人来说是愚蠢的，但我真的很想完成这项工作。如果你们中的任何人想成为英雄，请看看我有什么，并告诉我我在哪里搞砸了。

<html>
<head>
<title>Daily Calorie Goal</title>

</head>
<body>

<script type="text/javascript" language="javascript">

function Calculate() {

    var gender = document.getElementById("gender").value;
    var weight = document.getElementById("weight").value;
    var height = document.getElementById("height").value;
    var age = document.getElementById("age").value;
    var goal = document.getElementById("goal").value;

    if(gender=="male") 
        {
            val1 = 6.23 * weight;
            val2 = 12.7 * height;
            val3 = 6.8 * age;
            dailyDeficit = (goal * 3500) / 90;

            result = 66 + val1 + val2 - val3;

            cals = result * 1.55;
            calMax = cals - dailyDeficit;

        }
    else if (gender=="female")
        {
            val1 = 6.23 * weight;
            val2 = 4.7 * height;
            val3 = 4.7 * age;
            dailyDeficit = (goal * 3500) / 90;

            result = 655 + val1 + val2 - val3;

            cals = result * 1.55;
            calMax = cals - dailyDeficit;
        }



    document.write ('This is your Daily Calorie Goal. To achieve your goal, just consume fewer than this number of calories every day:<b>   ' + calMax.toFixed(2) + '</b><br>');

}



</script>

<form action="#">
    Gender  : <select id="gender"><option value="male">Male</option><option value="female">Female</option></select><br />
    Weight (lbs.)   : <input type="text" id="weight" /><br />
    Height (inches): <input type="text" id="height" /><br />
    Age     : <input type="text" id="age" /><br />
    Goal    : <select id="Goal"><option value=5>Lose 5 Pounds</option><option value=10>Lose 10 Pounds</option><option value=15>Lose 15 Pounds</option><option value=20>Lose 20 Pounds</option><option value=25>Lose 25 Pounds</option></select><br />


    </fieldset>
    <input type="submit" value="Get My Daily Calorie Goal" onclick="Calculate()" />
</form>
</html>
4

3 回答 3

1

You had one of your ids (Goal) spelled with a capital letter and your button was a submit type so it was trying to submit it to the server. 

 <html>
    <head>
    <title>Daily Calorie Goal</title>

    </head>
    <body>

    <script type="text/javascript" language="javascript">

    function Calculate() {

        var gender = document.getElementById("gender").value;
        var weight = document.getElementById("weight").value;
        var height = document.getElementById("height").value;
        var age = document.getElementById("age").value;
        var goal = document.getElementById("goal").value;

        if(gender=="male") 
            {
                val1 = 6.23 * weight;
                val2 = 12.7 * height;
                val3 = 6.8 * age;
                dailyDeficit = (goal * 3500) / 90;

                result = 66 + val1 + val2 - val3;

                cals = result * 1.55;
                calMax = cals - dailyDeficit;

            }
        else if (gender=="female")
            {
                val1 = 6.23 * weight;
                val2 = 4.7 * height;
                val3 = 4.7 * age;
                dailyDeficit = (goal * 3500) / 90;

                result = 655 + val1 + val2 - val3;

                cals = result * 1.55;
                calMax = cals - dailyDeficit;
            }



        document.write ('This is your Daily Calorie Goal. To achieve your goal, just consume fewer than this number of calories every day:<b>   ' + calMax.toFixed(2) + '</b><br>');

    }



    </script>

    <form action="#">
        Gender  : <select id="gender"><option value="male">Male</option><option value="female">Female</option></select><br />
        Weight (lbs.)   : <input type="text" id="weight" /><br />
        Height (inches): <input type="text" id="height" /><br />
        Age     : <input type="text" id="age" /><br />
        Goal    : <select id="goal"><option value=5>Lose 5 Pounds</option><option value=10>Lose 10 Pounds</option><option value=15>Lose 15 Pounds</option><option value=20>Lose 20 Pounds</option><option value=25>Lose 25 Pounds</option></select><br />


        </fieldset>
        <input type="button" value="Get My Daily Calorie Goal" onclick="Calculate()" />
    </form>
    </html>
于 2012-08-15T23:05:22.353 回答
1

Clearing the screen is a side-effect of document.write. What you probably want is having an element that will contain the text.

After the form element, you can append an holder element:

<div id="result"></div>

You can then set the content of it:

document.getElementById("result").textContent = "This is your daily...";
于 2012-08-15T23:05:48.553 回答
1

You just got to change this right here:

var goal = document.getElementById("goal").value;

to this

var goal = document.getElementById("Goal").value;
于 2012-08-15T23:06:17.820 回答