javascript權威指南練習1.2.1

Question

我正在閱讀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> 

Answer 1

在計算（）函數狀態的保存（）部分的代碼：

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

它應該是：

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