Question

我一直在研究这个小应用程序，它可以在我可以尝试的每个浏览器中运行良好（我在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>

Answer 1

我发现您的脚本存在以下问题：

.textContent。 IE使用.innerText代替。使用.innerHTML可能最容易，它可以在任何地方使用。
您的按钮是一个提交按钮，因此页面在推送后会重新加载。
你的很多变量都是未声明的，所以它们是隐式全局变量（坏）。
您有一个</fieldset>代码，但没有匹配<fieldset>。

这是一个固定且有效的版本：http://jsfiddle.net/jfriend00/b2DgP/

Answer 2

我想我发现了什么是错的：你使用textContent来设置DIV的内容。 Internet Explorer不支持此类属性（欢迎来到IE-haters的俱乐部）。尝试将textContent替换为nodeValue，它具有更好的跨浏览器兼容性。

Answer 3

其他人已经给你答案，一些意见和建议，使用你想要的东西，忽略你不想要的东西：

表单控件必须具有成功的名称（即与表单一起提交）
除非您使用XML或XHTML并将文档作为应用程序/ XML发送（极不可能），否则不需要XML样式标记
脚本元素的语言属性在HTML 4中已弃用，已从HTML5中删除
按照惯例，以大写字母开头的变量名称保留给构造函数
如果将一个除“+”以外的数学运算应用于字符串，它将被转换为数字，并且可以使用一元“+”代替parseInt。
可以使用Math.round代替toFixed（0）
val2，val3和结果的因子可以取决于所选择的性别，删除if..else语句。
select元素中的一个选项应设置为默认选择

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

<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>

JavaScript不能在IE9上工作，而是在其他浏览器上工作？怎么了？

3 个答案: