這是爲什麼不工作？我認爲這是一個轉換問題

我是一位腳本新手，他在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>

來源

2012-08-16 danielm

的問題是在這裏：

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!

明白，包含數字（例如"42"）的字符串和一個數之間的差是非常重要的（例如42）在JavaScript中。他們是兩個不同的東西。

來源

2012-08-16 14:45:20 Oded

@已結束感謝您的幫助。我會馬上研究parseFloat和parseInt。 – danielm 2012-08-16 15:10:36

@RichardEv感謝您花時間爲我提供鏈接。我正在研究這個以及Oded現在推薦的內容。 – danielm 2012-08-16 15:14:07

值（）你得到是一個字符串，你應該使用parseInt函數（）

來源

2012-08-16 14:54:55 sagioto

我一直在玩上JSFiddle你的代碼，但不能讓它改變。我已經根據需要使用了parseInt（），並將submit按鈕更改爲常規按鈕。我想要注意的一個主要變化是我使用innerHTML而不是textContent。我相信這是寫入<div>的正確形式。

我仍然無法讓你的代碼吐出答案。試一試，看看我是否誤解了你的代碼。

P.S.請將您的代碼保存在<head>中，而不要放在正文中。

來源

2012-08-16 15:50:51 Shabab

這是爲什麼不工作？我認爲這是一個轉換問題

回答

相關問題