Question

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

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

在将某些内容输入“feet”字段时，它会正确计算，但如果您还在表单的“英寸”字段中添加了一些内容，则会返回超过应有效值4倍的结果。< / p>

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

对于那些知道你在做什么的人来说，如果你可以花几秒钟，你可能会帮助别人制作他们生活中第一个真实世界的应用程序。

旁注：当我在浏览器（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>

Answer 1

问题在于：

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

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

您应该使用正确的类型：

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

我还建议使用parseFloat作为浮动类型。

这是JavaScript中 type coercion 的结果。

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

例如......

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）之间的区别非常重要。它们是两回事。

Answer 2

你得到的值（）是一个字符串，你应该使用parseInt（）

Answer 3

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

我仍然无法让你的代码吐出答案。抓住它，看看我是否误解了你的代码。

P.S。还请将您的代码保存在<head>而不是正文中。

为什么这不起作用？我认为这是一个转换问题

3 个答案: