2

我是一个脚本新手，在 Codecademy 做了一段时间的 JavaScript 练习，我有机会在工作中通过构建一个非常简单的应用程序（HTML 和 JavaScript）来挑战自己，该应用程序允许某人计算他们的卡路里数量可以每天食用，同时满足他们的减肥目标。

我已经差不多了。我有一个工作版本（感谢一些帮助），在表格中要求人们以英寸为单位给出他们的身高。我想做的最后一个更改是增加他们以标准格式（英尺和英寸）输入身高并让应用程序将其转换为等式的功能。这就是麻烦开始的地方。我添加了第二个字段并重命名了创建转换所需的变量，但发生的事情很奇怪。

当在“英尺”字段中输入某些内容时，它会正确计算，但如果您还在表单的“英寸”字段中添加一些内容，它返回的结果是应有的 4 倍以上。

我尝试将转换下移到性别功能中，但没有任何区别。我没有更改以前工作的代码的任何其他内容，所以我认为问题必须在英寸变量或英寸表单元素或它们组合的高度变量中。后者在我看来最有可能，但我似乎找不到问题所在。

对于那些知道自己在做什么的人来说，这可能是显而易见的，如果你能花几秒钟的时间，你将帮助某人制作他们生活中的第一个现实世界使用的应用程序。

旁注：当我在浏览器（Chrome）中打开它时，第一次填写时，答案会闪烁并消失。之后，每次它都会在屏幕上正确显示答案。我不确定这是我犯的错误还是浏览器问题或什么。

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

</head>
<body>

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

function Calculate() {

    var gender = document.getElementById("gender").value;
    var weight = document.getElementById("weight").value;
    var inches = document.getElementById("inches").value;
    var height = (document.getElementById("feet").value * 12) + inches;
    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.getElementById("answer").textContent = 'Your Daily Calorie Max is: ' + calMax.toFixed(0); 

}




</script>

<form action="#">
    Gender  : <select id="gender"><option value="male">Male</option><option value="female">Female</option></select><br />
    Weight  : <input type="text" id="weight" />lbs.<br />
    Height  : <input type="text" id="feet" />ft. <input type="text" id="inches" />in.<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="Give me my Daily Calorie Max!" onclick="Calculate()" />
</form>
<div id="answer"></div>

</body>
</html>
4

3 回答 3

3

问题在这里：

var inches = document.getElementById("inches").value;
var height = (document.getElementById("feet").value * 12) + inches;

您最终将 for 的计算结果feet与字符串 for连接起来inches（这里发生了几种类型强制 - 从feet元素的值到用于乘法的整数，然后从生成的整数到用于与字符串连接的inches字符串）。

您应该为这些使用正确的类型：

var inches = parseInt(document.getElementById("inches").value, 10);
var height = (parseInt(document.getElementById("feet").value, 10) * 12) + inches;

我还建议使用parseFloat浮点类型。

这是JavaScript中类型强制的结果。

该+运算符可用于将两个数字相加，但它也会连接字符串（即使这些字符串仅包含数字值）。如果你尝试+一个字符串和一个数字，你会得到一个字符串。

例如...

var resultOfAdd = 34 + 12; // resultOfAdd equals 46
var resultOfAdd = "34" + "12"; // resultOfAdd equals  "3412" ("34" and "12" are strings)
var resultOfAdd = "34" + 12; // resultOfAdd equals "3412" (12 gets coerced into a string)
var resultOfAdd = parseInt("34") + 12; // resultOfAdd equals 46!

理解JavaScript中包含数字（例如"42"）和数字（例如 ）的字符串之间的区别非常重要。42他们是两个不同的东西。

于 2012-08-16T14:45:20.397 回答
0

你得到的 value() 是一个字符串，你应该使用 parseInt()

于 2012-08-16T14:54:55.353 回答
0

我一直在JSFiddle上玩你的代码，但无法改变它。我根据需要使用了 parseInt() 并将submit按钮更改为常规按钮。我要注意的一个主要变化是我使用innerHTML了textContent. 我相信这是写信的正确形式<div>。

我仍然无法让您的代码吐出答案。试一试，看看我是否误解了你的代码。

PS 请将您的代码保存在正文中<head>而不是正文中。

于 2012-08-16T15:50:51.893 回答