html - javascript definitive guide exercise 1.2.1 -

html - javascript definitive guide exercise 1.2.1 -

i'm going through book javascript: definitive guide , i'm having little difficulty 1 of examples in book. thought create loan calculator. if user inputs info form info saved , recalled when user returns site/app.

the issue i'm running while portion of info beingness saved , it's showing in wrong portions of form. specific, amount shows correctly, apr, years, , zipcode show incorrectly. years shows in apr, zipcode shows in years, , years shows 'undefined'. i've checked ids , match i'm not sure why info showing incorrectly. can point me in right direction?

this js:

function calculate() { // input , output elements in 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 involvement = parsefloat(apr.value) / 100 / 12; var payments = parsefloat(years.value) * 12; // compute 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 output fields, rounding 2 decimal places payment.innerhtml = monthly.tofixed(2); total.innerhtml = ( monthly * payments ).tofixed(2); totalinterest.innerhtml = ( ( monthly * payments ) - principal ).tofixed(2); // save user's input can restore next time visit save( amount.value, apr.value, years.value, zipcode.value ); // advertise: find , display local lenders, ignore network errors seek { // grab errors occur within these curly braces... getlenders( amount.value, apr.value, years.value, zipcode.value ); } catch(e) { /* ...and ignore errors */ } // finally, chart loan balance, , involvement , equity payments chart( principal, interest, monthly, payments ); } else { payment.innerhtml = ""; // erase content of these elements total.innerhtml = ""; totalinterest.innerhtml = ""; chart(); // no arguments, clears chart } } function save(amount, apr, years, zipcode) { if (window.localstorage) { // browser supports localstorage.loan_amount = amount; localstorage.loan_apr = apr; localstorage.loan_years = years; localstorage.loan_zipcode = zipcode; } } window.onload = function() { // if browser supports localstorage , have stored info 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; } };

this html:

<table> <tr> <th>enter loan data:</th> <td></td> <th>loan balance, cumulative equity, , involvement 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 involvement (%):</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 loan 1 of these fine lenders: <div id="lenders"></div> </td> </tr> </table>

the code in save() portion of calculate() function states:

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

it should read:

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

javascript html