Question

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

我遇到的问题是，虽然只保存了一部分数据并且它显示在表单的错误部分。具体而言，金额显示正确，但apr，年份和邮政编码都显示不正确。年份显示在apr，zipcode显示多年，而年份显示'undefined'。我已经检查了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 );

javascript权威指南练习1.2.1

1 个答案: