[英]Javascript onclick event not firing in Firefox
我有一個可以在IE和Chrome中調用的函數,但是在Firefox中根本不起作用。 功能如下:
function calcDebt(){
var totaldebt=0;
var curBalance=0;
var totRepay =0;
var totMonths=0;
var curMonthAmount=0;
var curRate=0;
for($i=1;$i<=6; $i++){
curBalance = document.getElementById('balance'+$i).value;
curRate = document.getElementById('rate'+$i).value;
curMonthAmount=document.getElementById('monthly'+$i).value;
if(curBalance>0 && curMonthAmount>0 && curRate>0){
var remainingBalance=curBalance;
var mRate=(curRate/100)/12;
var months=0;
var payment=curBalance*(mRate)/( 1-Math.pow((1+mRate),(0)) );
payment=Math.round(payment*100)/100;
while (remainingBalance>0)
{
months++;
remainingBalance=remainingBalance*(1 + mRate)-curMonthAmount;
}
totRepay = totRepay+(curMonthAmount*months);
totMonths += months;
totaldebt += (curBalance*1);
}
}
document.getElementById('totalDebt').innerText = totaldebt.toFixed(2);
document.getElementById('conBalance').innerText = totaldebt.toFixed(2);
document.getElementById('totalMonths').innerText = totMonths;
document.getElementById('totalRepayment').innerText = totRepay.toFixed(2);
document.getElementById('finalMonthly').value = '';
document.getElementById('finalTerm').value = '';
document.getElementById('finalPayment').value = '';
}
和HTML:
<table>
<thead>
<td scope="col">Balance remaining</td>
<td scope="col">Interest rate</td>
<td scope="col">Monthly payment</td>
</thead>
<tbody>
<tr>
<td><input size=3 type=text id="balance1"></td>
<td><input size=1 type=text id="rate1"></td>
<td><input size=3 type=text id="monthly1"></td>
</tr>
<tr>
<td><input size=3 type=text id="balance2"></td>
<td><input size=1 type=text id="rate2"></td>
<td><input size=3 type=text id="monthly2"></td>
</tr>
<tr>
<td><input size=3 type=text id="balance3"></td>
<td><input size=1 type=text id="rate3"></td>
<td><input size=3 type=text id="monthly3"></td>
</tr>
<tr>
<td><input size=3 type=text id="balance4"></td>
<td><input size=1 type=text id="rate4"></td>
<td><input size=3 type=text id="monthly4"></td>
</tr>
<tr>
<td><input size=3 type=text id="balance5"></td>
<td><input size=1 type=text id="rate5"></td>
<td><input size=3 type=text id="monthly5"></td>
</tr>
<tr>
<td><input size=3 type=text id="balance6"></td>
<td><input size=1 type=text id="rate6"></td>
<td><input size=3 type=text id="monthly6"></td>
</tr>
<tr>
<td colspan="4"><input type=button class="button" value="Calculate" onclick="calcDebt();"></td>
</tr>
<tr class="con">
<td colspan="4">Results</td>
</tr>
<tr>
<td colspan="1">Total debt:</td>
<td class="results" colspan="3"><label id="totalDebt">0</label></td>
</tr>
<tr>
<td colspan="1">Debt free in:</td>
<td class="results"><label id="totalMonths">0</label> months</td>
</tr>
<tr>
<td colspan="1">Total repayment:</td>
<td class="results" colspan="3">£<label id="totalRepayment">0</label></td>
</tr>
有什么原因不能在Firefox中正常工作? 使用Firebug,我可以看到它告訴我conBalance在定義時是未定義的。
有任何想法嗎? 感謝您提供的任何幫助。
Firefox不支持innerText屬性,該屬性在HTML5之前是非標准的。 相反,它支持大約8年前標准化的textContent屬性。 所以你有這樣的代碼:
document.getElementById('conBalance').innerText = totaldebt.toFixed(2);
簡單的解決方法是改為設置innerHTML屬性。
另外,您可以使用setText函數,例如:
function setText(el, text) {
if (typeof el.textContent == 'string') {
el.textContent = value;
} else if (typeof el.innerText == 'string') {
el.innerText = value;
}
}
然后這樣稱呼:
setText(document.getElementById('conBalance'), totaldebt.toFixed(2));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.