Событие Javascript onclick не запускается в 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));