2

私はスクリプト初心者で、Codecademy でしばらくの間 JavaScript の演習を行っていましたが、職場で非常に単純なアプリ (HTML と JavaScript) を作成して自分自身に挑戦する機会が訪れました。減量の目標を達成しながら、毎日摂取できます。

私はほとんどそこにそれを持っています。私は、人々に身長をインチで与えるようにフォームで要求する作業バージョンを（いくつかの助けのおかげで）持っていました。私がやりたかった最後の変更は、身長を標準形式 (フィートとインチ) で入力し、アプリに計算式で変換させる機能を追加することでした。そこからトラブルが始まりました。2 番目のフィールドを追加し、変換を作成するために必要な変数の名前を変更しましたが、奇妙なことが起こりました。

「フィート」フィールドに何かを入力すると正しく計算されますが、フォームの「インチ」フィールドにも何かを追加すると、本来の 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;

feetの計算結果をforの文字列と連結することになります（ここでは、要素の値から乗算用の整数へ、次に結果の整数から文字列との連結用の文字列へのinchesいくつかの型の強制が発生しています）。feetinches

これらには正しいタイプを使用する必要があります。

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

parseFloatフロートタイプにも使用することをお勧めします。

これは、JavaScriptでの型強制の結果です。

演算子を使用して2つの数値を加算できますが、+文字列を連結することもできます（これらの文字列に数値のみが含まれている場合でも）。+文字列と数字を試してみると、文字列が表示されます。

例えば...

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"、数字（eg）を含む文字列と数字（eg）の違いを理解することが非常に重要です。42それらは2つの異なるものです。

于 2012-08-16T14:45:20.397 に答える
0

取得している value() は文字列です。parseInt() を使用する必要があります

于 2012-08-16T14:54:55.353 に答える
0

JSFiddleであなたのコードをいじっていましたが、変更できませんでした。必要に応じて parseInt() を使用し、submitボタンを通常のボタンに変更しました。注意したい大きな変更の 1 つはinnerHTML、代わりに を使用したことですtextContent。これが への正しい書き込み形式だと思います<div>。

私はまだあなたのコードから答えを出すことができません。それを突き刺して、コードを誤解していないかどうかを確認してください。

<head>PSまた、コードを本文ではなくに保管してください。

于 2012-08-16T15:50:51.893 に答える