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. 脚本元素的语言属性在 HTML 4 中已弃用，它已从 HTML5 中删除
  4. 按照惯例，以大写字母开头的变量名是为构造函数保留的
  5. 当对字符串应用除“+”之外的数学运算时，它将被转换为数字，并且可以使用一元“+”代替 parseInt。
  6. 可以使用 Math.round 代替 toFixed(0)
  7. val2、val3 和 result 的因子可以取决于所选的性别，删除 if..else 语句。
  8. 选择元素中的一个选项应设置为默认选择

可以对代码进行整理和重构以消除冗余：

<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-haters 俱乐部）。尝试替换textContent为nodeValue，它具有更好的跨浏览器兼容性。

于 2012-08-17T00:26:23.180 回答