0

私はこの小さなアプリに取り組んできましたが、試すことができるすべてのブラウザー (私は Mac を使用しています) で問題なく動作し、Firefox、Chrome、Opera、および Safari を試してみましたが、動作します。同僚 (PC を使用している) に送信したところ、Chrome、Firefox、Opera では動作するが、IE9 では動作しないとのことでした。

別の同僚に試してもらったところ、Chrome では動作するが IE9 では動作しないとのことでした。

これまでのところ、IE9 を除くすべてのブラウザで動作するようです。別の同僚は、Chrome で初めて画面を更新しただけで、すべてを再入力した後、繰り返し使用しても問題なく動作したと述べました。

誰がそれの何が悪いのか教えてもらえますか? これは私の最初の実際の使用アプリケーションですので、問題が誰にとっても明らかである場合は申し訳ありません.

<html>
<head>
<title>Daily Calorie Limit</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 = parseInt(document.getElementById("inches").value, 10);
    var height = (parseInt(document.getElementById("feet").value, 10) * 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 Limit 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 Limit!" onclick="Calculate()" />
</form>
<div id="answer"></div>

</body>
</html>
4

3 に答える 3

3

あなたのスクリプトには次の問題があります。

  1. .textContentすべてのブラウザーでサポートされているわけではありません。IE が.innerText代わりに使用します。.innerHTMLどこでも機能するのがおそらく最も使いやすいでしょう。
  2. あなたのボタンは送信ボタンなので、押すとページがリロードされます。
  3. 多くの変数は宣言されていないため、暗黙のグローバル (悪い) です。
  4. タグはあります</fieldset>が、一致する がありません<fieldset>。

修正された動作中のバージョンは次のとおりです。http://jsfiddle.net/jfriend00/b2DgP/

于 2012-08-17T00:27:02.583 に答える
0

他の人はあなたに答え、いくつかのコメントと提案を与え、あなたが望むものを使い、あなたが望まないものを無視します：

  1. フォームコントロールは、成功するために（つまり、フォームとともに送信されるために）名前を持っている必要があります
  2. XMLまたはXHTMLを使用していて、アプリケーション/ XMLとしてドキュメントを送信している場合を除いて、XMLスタイルのマークアップは必要ありません（ほとんどありません）。
  3. スクリプト要素の言語属性はHTML4で非推奨になり、HTML5から削除されました。
  4. 慣例により、大文字で始まる変数名はコンストラクター用に予約されています
  5. 「+」以外の数学演算が文字列に適用される場合、それは数値に変換され、parseIntの代わりに単項「+」を使用できます。
  6. toFixed（0）の代わりにMath.roundを使用できます
  7. val2、val3、およびresultの係数は、選択した性別に応じて作成でき、if..elseステートメントを削除します。
  8. select要素の1つのオプションは、デフォルトで選択されたものとして設定する必要があります

コードを整理およびリファクタリングして、冗長性を排除できます。

<script type="text/javascript">

function calculate() {
    var form   = document.forms['f0'];
    var height = form.feet.value * 12 + +form.inches.value;
    var factor = form.gender.value == 'male'? [12.7, 6.8, 66] : [4.7, 4.7, 655];

    var val1 = 6.23 * form.weight.value;
    var val2 = factor[0] * height;
    var val3 = factor[1] * form.age.value;
    var result = factor[2] + val1 + val2 - val3;

    dailyDeficit = form.goal.value * 3500 / 90;
    calMax = result * 1.55 - dailyDeficit;

    document.getElementById("answer").innerHTML = 'Your Daily Calorie Limit is: ' +
                                                   calMax.toFixed(0); 
}

</script>

<form action="#" id="f0">
    Gender  : <select id="gender">
               <option value="male">Male
               <option value="female">Female
              </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 value="10">Lose 10 Pounds
                <option value="15">Lose 15 Pounds
                <option value="20">Lose 20 Pounds
                <option value="25">Lose 25 Pounds
              </select>
              <br>
              <input type="button" value="Give me my Daily Calorie Limit!"
                     onclick="calculate()">
</form>
<div id="answer"></div>
于 2012-08-17T01:04:22.287 に答える
0

何が問題なのかがわかったと思いますtextContent。DIV の内容を設定するために使用します。このようなプロパティは、Internet Explorer ではサポートされていません (IE 嫌いのクラブへようこそ)。に置き換えtextContentてみてくださいnodeValue。クロスブラウザーの互換性が向上しています。

于 2012-08-17T00:26:23.180 に答える