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

Why doesn't this work? I think it's a conversion issue

本文关键字：转换 问题 一个 不起作用 为什么      更新时间：2023-09-26

我是一个脚本新手，已经在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("answerswer").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="answerswer"></div>
</body>
</html>

问题就在这里：

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 中类型强制的结果。

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

例如。。。

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!

了解包含数字的字符串之间的区别非常重要（例如 "42" ） 和一个数字（例如 42 ） 在 JavaScript 中。它们是两回事。

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

我一直

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

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

附言也请将您的代码保存在<head>中，而不是正文中。

相关文章：