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> 

感謝大家的幫助。