为什么这个 javascript 代码不生成任何输出？似乎没有任何错误

Question

我正在学习 javascript，但我一直坚持这一点。似乎没有任何语法错误，并且表单在 html 中正确显示，我只是没有得到任何计算数据。我不确定我是否遗漏了一些您可能会注意到的小东西，或者我所写的内容是否完全错误。任何建议将不胜感激。

感谢您的帮助

HTML：

<form id="loanddata">
    <table>
        <tr><td><b>enter loan information</b></td></tr>
        <tr><td>1) Amount of loan</td> <td><input type="text" name="principal" onchange="calculate();"></td></tr>
        <tr><td>2) Annual Percent of increase</td> <td><input type="text" name="interest" onchange="calculate();"></td></tr>
        <tr><td>3) Repayment period in years</td><td><input type="text" name="years" onchange="calculate();"></td></tr>
        <tr><td></td>
            <td><button name="compute" type="submit" onclick="calculate();"></td>
        </tr>
        <tr><td><b>Payment Information</b></td></tr>
        <tr><td>4) Your Monthly Payment</td> <td>$<span class="result" id="payment"></span></td></tr>
        <tr><td>5)Your Total Payment</td> <td>$<span class="result" id="total"></span></td></tr>
        <tr><td>6) Your Total Interest Payment</td> <td><span class="result" id="totalinterest"></td>        </tr>

    </table>   
</form>

JavaScript：

function calculate() {    

var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value;
var payments = document.loandata.years.value;

var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);

var payment = document.getElementById("payment");
var total = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");

if (isFinite(monthly)){

    payment.innerHTML = monthly.toFixed(2);
    total.innerHTML = (monthly * payments).toFixed(2);
    totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);

    } else {
        payment.innerHTML = "";
        total.innerHTML = "";
        totalinterest.innerHTML = "";
    }   
}

Answer 1

试试这个：

HTML：

<table>
<tr><td><b>enter loan information</b></td></tr>
<tr><td>1) Amount of loan</td> <td><input type="text" id="principal" onchange="calculate();"></td></tr>
<tr><td>2) Annual Percent of increase</td> <td><input type="text" id="interest" onchange="calculate();"></td></tr>
<tr><td>3) Repayment period in years</td><td><input type="text" id="years" onchange="calculate();"></td></tr>
<tr><td></td>
    <td><button name="compute" type="submit" onclick="calculate();" /></td>
</tr>

<tr><td><b>Payment Information</b></td></tr>

<tr><td>4) Your Monthly Payment</td> <td>$<span class="result" id="payment"></span></td></tr>

<tr><td>5)Your Total Payment</td> <td>$<span class="result" id="total"></span></td></tr>

<tr><td>6) Your Total Interest Payment</td> <td><span class="result" id="totalinterest"></td></tr>

</table> 

JavaScript：

function calculate() {    
var principal = parseInt(document.getElementById("principal").value);
var interest = parseInt(document.getElementById("interest").value);
var payments = parseInt(document.getElementById("years").value);

if(!isNaN(principal) && !isNaN(interest) && !isNaN(payments)){

    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");

    if (isFinite(monthly)){

        payment.innerHTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);

        } else {
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML = "";
        }   
    }
}

工作Fiddle.

Answer 2

变化：

<form id="loanddata">

为：

<form name="loandata">

Answer 3

我修改了你的代码。
有一些错字和基本的 javascript 错误。

• 第一个表单 id 将是 loandata。

• 第二次访问这样的表单值- document.forms.loandata.principal.value;

• Last - 添加此项以限制表单提交 - onsubmit="return 假的；”

这是工作代码。

HTML-

<form id="loandata" onsubmit="return false;">

    <table>

        <tr><td><b>enter loan information</b></td></tr>

        <tr><td>1) Amount of loan</td> <td><input type="text" name="principal" onchange="calculate();"></td></tr>

        <tr><td>2) Annual Percent of increase</td> <td><input type="text" name="interest" onchange="calculate();"></td></tr>

        <tr><td>3) Repayment period in years</td><td><input type="text" name="years" onchange="calculate();"></td></tr>

        <tr>
            <td></td>

            <td><button name="compute" onclick="calculate();"></td>

        </tr>

        <tr><td><b>Payment Information</b></td></tr>

        <tr><td>4) Your Monthly Payment</td> <td>$<span class="result" id="payment"></span></td></tr>

        <tr><td>5)Your Total Payment</td> <td>$<span class="result" id="total"></span></td></tr>

        <tr><td>6) Your Total Interest Payment</td> <td><span class="result" id="totalinterest"></td></tr>

    </table>
</form>

JS-

function calculate() {

        var principal = document.forms.loandata.principal.value;
        var interest = document.forms.loandata.interest.value;
        var payments = document.forms.loandata.years.value;

        var x = Math.pow(1 + interest, payments);
        var monthly = (principal * x * interest) / (x - 1);

        var payment = document.getElementById("payment");
        var total = document.getElementById("total");
        var totalinterest = document.getElementById("totalinterest");

        if (isFinite(monthly)) {

            payment.innerHTML = monthly.toFixed(2);
            total.innerHTML = (monthly * payments).toFixed(2);
            totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);

        } else {
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML = "";
        }

    }  

确保在 Head 标签上附加 JS。