Javascript onclick event не работает в Firefox

Question

У меня есть функция, которая работает при вызове в 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 не определен, когда он определен.

Любые идеи? Я ценю любую помощь, которую вы можете предоставить.

Answer 1

Firefox не поддерживает свойство innerText, которое было нестандартным до HTML5. Вместо этого он поддерживает свойство textContent, стандартизованное около 8 лет назад. Итак, у вас есть код:

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