javascript 权威指南练习 1.2.1

Question

我正在阅读《JavaScript:权威指南》一书，但我对书中的一个示例遇到了一些困难。这个想法是创建一个贷款计算器。如果用户在表单中输入数据，则数据将被保存并在用户返回网站/应用程序时调用。

我遇到的问题是，虽然只保存了一部分数据，但它显示在表单的错误部分。具体来说，金额显示正确，但 apr、年份和邮政编码均显示错误。年份显示在 apr 中，邮政编码显示在年份中，年份显示“未定义”。我检查了 id，它们都匹配，所以我不确定为什么数据显示不正确。有人能指出我正确的方向吗？

这是 JS:

function calculate() {
// Look up the input and output elements in the document
var amount        = document.getElementById("amount");
var apr           = document.getElementById("apr");
var years         = document.getElementById("years");
var zipcode       = document.getElementById("zipcode");
var payment       = document.getElementById("payment");
var total         = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");

var principal = parseFloat(amount.value);
var interest  = parseFloat(apr.value) / 100 / 12;
var payments  = parseFloat(years.value) * 12;

// Now compute the monthly payment figure.
var x       = Math.pow(1 + interest, payments); // Math.pow() computes powers
var monthly = (principal*x*interest)/(x - 1);

if (isFinite(monthly)) {
    // Fill in the output fields, rounding to 2 decimal places
    payment.innerHTML       = monthly.toFixed(2);
    total.innerHTML         = ( monthly * payments ).toFixed(2);
    totalinterest.innerHTML = ( ( monthly * payments ) - principal ).toFixed(2);

    // Save the user's input so we can restore it the next time they visit
    save( amount.value, apr.value, years.value, zipcode.value );

    // Advertise: find and display local lenders, but ignore network errors
    try {                   // Catch any errors that occur within these curly braces...
        getLenders( amount.value, apr.value, years.value, zipcode.value );
    }
    catch(e) { /* ...and ignore those errors  */ }

    // Finally, chart loan balance, and interest and equity payments
    chart( principal, interest, monthly, payments );
    }
else {
    payment.innerHTML       = "";     // Erase the content of these elements
    total.innerHTML         = "";
    totalinterest.innerHTML = "";
    chart();                          // With no arguments, clears the chart
    }
}

function save(amount, apr, years, zipcode) {
if (window.localStorage) { // Only do this is the browser supports it
        localStorage.loan_amount    = amount;
        localStorage.loan_apr       = apr;
        localStorage.loan_years     = years;
        localStorage.loan_zipcode   = zipcode;
}
}

window.onload = function() {
// If the browser supports localStorage and we have some stored data
if (window.localStorage && localStorage.loan_amount) {
    document.getElementById("amount").value  = localStorage.loan_amount;
    document.getElementById("apr").value     = localStorage.loan_apr;
    document.getElementById("years").value   = localStorage.loan_years;
    document.getElementById("zipcode").value = localStorage.loan_zipcode;
}
};

这是 HTML:

<table>
    <tr>
        <th>Enter Loan Data:</th>
        <td></td>
        <th>Loan Balance, Cumulative Equity, and Interest Payments</th>
    </tr>
    <tr>
        <td>Amount of loan ($):</td>
        <td><input id="amount" onchange="calculate();"</td>
        <td rowspan="8">
            <canvas id="graph" width="400" height="250"></canvas>
        </td>
    </tr>
    <tr>
        <td>Annual Interest (%):</td>
        <td><input id="apr" onchange="calculate();"></td>
    </tr>
    <tr>
        <td>Repayment period (years):</td>
        <td><input id="years" onchange="calculate();"></td>
    </tr>
    <tr>
        <td>Zipcode (to find lenders):</td>
        <td><input id="zipcode" onchange="calculate();"></td>
    </tr>
    <tr>
        <th>Approximate Payments:</th>
        <td><button onclick="calculate();">Calculate</button></td>
    </tr>
    <tr>
        <td>Monthly payment:</td>
        <td>$<span class="output" id="payment"></span></td>
    </tr>
    <tr>
        <td>Total payment:</td>
        <td>$<span class="output" id="total"></span></td>
    </tr>
    <tr>
        <td>Total interest:</td>
        <td>$<span class="output" id="totalinterest"></span></td>
    </tr>
    <tr>
        <th>Sponsors:</th>
        <td colspan="2">Apply for your loan with one of these fine lenders:
        <div id="lenders"></div>
        </td>
    </tr>
</table>

Answer 1

calculate() 函数的 save() 部分中的代码指出:

save( amount.value, years.value, zipcode.value );

它应该是:

save( amount.value, apr.value, years.value, zipcode.value );