Internet Explorer：无法设置未定义或空引用的属性“值”

Question

我有一个 javascript 计算器，它可以在除 Internet Explorer 之外的所有浏览器中正常工作。我需要知道为什么 Internet Explorer 在第 14 行给我这个错误：“无法设置未定义或空引用的属性'值'。”

这是计算器代码：

<meta http-equiv="x-ua-compatible" content="IE=10">
<script>

function showpay() {
"use strict";
if ((document.loanCalc.loan.value === null || document.loanCalc.loan.value.length === 0) ||
        (document.loanCalc.months.value === null || document.loanCalc.months.value.length === 0)
        ||
        (document.loanCalc.rate.value === null || document.loanCalc.rate.value.length === 0)) { document.loanCalc.pay.value = " ";
    } else {
     var princ = document.loanCalc.loan.value;
     var term  = document.loanCalc.months.value;
     var intr   = document.loanCalc.rate.value / 1200;
     document.loanCalc.pay.value = Math.round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));
}
// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
}

</script>


<form name=loanCalc method=POST>
<table class="calculator">

<tr><td>Loan Amount</td><td align=right><input type=number onInput='showpay()' name=loan size=10 value="15000"></td></tr>

<tr><td>Term in Months</td><td align=right><input type=number onInput='showpay()' name=months size=10 value="60"></td></tr>

<tr><td>Interest Rate</td><td align=right><input type=number onInput='showpay()' name=rate size=10 value="1.99"></td></tr>

<tr><td>Monthly Payment</td></tr>

<tr><td align=left class=result><span>$</span><output name=pay>263</output></td></tr>

</table>
</form>

Internet Explorer 的调试器在第 14 行显示“无法设置未定义或空引用的属性‘值’”：document.loanCalc.pay.value = Math.round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));

该代码可在 Chrome、Safari 和 Firefox 中正常工作。您可以在此页面上查看正在运行的计算器：http://bloomcu.com/test-page/

为什么我在 Internet Explorer 中收到此错误？

Answer 1

这是更正的一行（根据我的评论）

<tr><td>Loan Amount </td><td><input type="number" onInput="showpay()" name="loan" id="loan" size="10" value="15000" style="text-align:right"></td></tr>

如果你都这样修复它们，它会更加朝着无处不在的方向工作。

Answer 2

如果可以的话，你可以在IE上试试这个

<meta http-equiv="x-ua-compatible" content="IE=10">
<script>
document.loanCalc.pay = document.getElementById("pay");

function showpay() {
    "use strict";
    if ((document.loanCalc.loan.value === null || document.loanCalc.loan.value.length === 0) ||
        (document.loanCalc.months.value === null || document.loanCalc.months.value.length === 0)
        ||
        (document.loanCalc.rate.value === null || document.loanCalc.rate.value.length === 0)) { document.loanCalc.pay.innerHTML = " ";
    } else {
     var princ = document.loanCalc.loan.value;
     var term  = document.loanCalc.months.value;
     var intr   = document.loanCalc.rate.value / 1200;
     document.loanCalc.pay.innerHTML = Math.round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));
}
// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
}

</script>


<form name=loanCalc method=POST>
<table class="calculator">

<tr><td>Loan Amount</td><td align=right><input type=number onInput='showpay()' name=loan size=10 value="15000"></td></tr>

<tr><td>Term in Months</td><td align=right><input type=number onInput='showpay()' name=months size=10 value="60"></td></tr>

<tr><td>Interest Rate</td><td align=right><input type=number onInput='showpay()' name=rate size=10 value="1.99"></td></tr>

<tr><td>Monthly Payment</td></tr>

<tr><td align=left class=result><span>$</span><span id='pay'>263</span></td></tr>

</table>
</form>

Answer 3

@Z.Z.正确：资源管理器不支持<output> 标签。因此，我将<output>替换为<input>，然后使用disabled="disabled"，以防止用户更改计算结果。

最终代码如下所示：

<meta http-equiv="x-ua-compatible" content="IE=10">
<script>

function showpay() {
"use strict";

if ((document.loanCalc.loan.value === null || document.loanCalc.loan.value.length === 0) ||
        (document.loanCalc.months.value === null || document.loanCalc.months.value.length === 0) ||
        (document.loanCalc.rate.value === null || document.loanCalc.rate.value.length === 0)) 
    { document.loanCalc.pay.value = " ";
} 

else {
     var princ = document.loanCalc.loan.value;
     var term  = document.loanCalc.months.value;
     var intr   = document.loanCalc.rate.value / 1200;
     document.loanCalc.pay.value = Math.round(princ * intr / (1 - (Math.pow(1 / (1 + intr), term))));
}
// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
}

</script>

<form name=loanCalc method=POST>
<table class="calculator">

<tr><td>Loan Amount</td><td><input type="number" onInput="showpay()" name="loan" id="loan" size="10" value="15000"></td></tr>

<tr><td>Term in Months</td><td><input type="number" onInput="showpay()" name="months" id="months" size="10" value="60"></td></tr>

<tr><td>Interest Rate</td><td><input type="number" onInput="showpay()" name="rate" id="rate" size="10" value="1.99"></td></tr>

<tr><td>Monthly Payment</td></tr>

<tr><td class=result><span>$</span><input name="pay" id="pay" value="263" disabled="disabled"></input></td></tr>

</table>
</form>

感谢大家的帮助。