Question

我是编程的新手。我已经在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>

Answer 1

您的一个ID（目标）拼写为大写字母，而您的按钮是提交类型，因此它尝试将其提交给服务器。

 <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>

Answer 2

清除屏幕是document.write的副作用。你可能想要的是拥有一个包含文本的元素。

在表单元素之后，您可以附加一个holder元素：

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

然后您可以设置它的内容：

document.getElementById("result").textContent = "This is your daily...";

Answer 3

你只需要改变这一点：

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

到这个

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

这段代码出了什么问题？我想我搞砸了HTML和Javascript之间的沟通

3 个答案: