javascript权威指南练习1.2.1

我正在阅读《JavaScript：最终指南》一书，书中的一个例子有点困难。这个想法是创建一个贷款计算器。如果用户在表单中输入数据，则当用户返回网站/应用程序时，数据将被保存并调用。

我遇到的问题是，虽然只保存了一部分数据，但它显示在表格的错误部分。具体来说，金额显示正确，但四月、年份和邮政编码都显示错误。年份显示在四月，邮政编码显示在年份，年份显示"未定义"。我已经检查了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>