1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 2:29 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Linking values into js function from html

         

zero3ree

11:39 pm on Nov 8, 2009 (gmt 0)

10+ Year Member



I have created a Amort Table. It worked fine when I prompted the values from html. Now I am attempting to set up inputs and a drop down list to send the values to the function in js that will in turn send the table back to the html and put a table in the div. The error Im getting is this "Exception: document.getElementById(id) is null File: file:///E:/Documents%20and%20Settings/Donnie/Desktop/fRANKLIN/ITEC%20386/Homework%207/LoanAmortization2.js Line: 61 Column: 0"

I can't figure out what is wrong.

JS:

function amort(idPrinciple, idInterest, idTerms, idDiv) {
var balance = getInt(idPrinciple);
var interestRate = getInt(idInterest);
var terms = getInt(idTerms);
var monthlyRate = interestRate / 12;
var payment = balance * (monthlyRate / (1 - Math.pow(1 + monthlyRate, -terms)));
var result = "Loan amount: $" + balance.toFixed(2) + "<br />" + "Interest rate: " +
(interestRate * 100).toFixed(2) +
"%<br />" +
"Number of months: " +
terms +
"<br />" +
"Monthly payment: $" +
payment.toFixed(2) +
"<br />" +
"Total paid: $" +
(payment * terms).toFixed(2) +
"<br /><br />";

Result += "<table border='1'><tr><th>Month</th><th>Balance</th>" +
"<th>Interest</th><th>Principal</th>";
var sumInterest = 0;
var sumPrinciple = 0;
for (var i = 1; i <= terms; ++i) {
// variable to calculate interest for each month
var thisInterest = balance * monthlyRate;
sumInterest += thisInterest;
// variable to calculate principle after interest is added and payment is subtracted
var thisPrinciple = payment - thisInterest;
sumPrinciple += thisPrinciple;
// variable to calculate new balance after payment
var thisBalance = balance
balance -= thisPrinciple;

Result +="<tr><th>" + i + " </th><th>" + thisBalance.toFixed(2) + "</th>" +
"<th>" +
thisInterest.toFixed(2) +
"</th><th>" +
thisPrinciple.toFixed(2) +
"</th>"
"</table>";
setDiv(DivID, Result);;
}
}
// Function to set the div.
function setDiv(divId, sHtml) {
var div = document.getElementById(divId);
div.innerHTML = sHtml;
div.style.display="block";}
// Function to add to div.
function addToDiv(divId, sHTMLtoAdd) {
var div = document.getElementById(divId);
div.innerHTML += sHTMLtoAdd;
div.style.display="block";}
// Function to grab values.
function getInt(id) {
return parseInt(document.getElementById(id).value);}

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loan Amortization</title>
<script language="JavaScript" type="text/javascript" src="LoanAmortization2.js">
</script>
</head>
<body><form><fieldset><table>
<legend>Inputs</legend>
<table cellpadding="5">
<td><label for="principal">Principal:</label></td>
<td><input type="text" name="principalID" id="Principal" size="20" value="6000" /></td>
</tr>
<tr>
<td><label for="interest">Interest rate:</label></td>
<td><input type="text" name="interestID" id="Interest" size="20" value="8.5" /></td>
</tr>
<tr>
<td><label for="Terms">Terms:</td>
<td><form>
<select id="terms">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
<option value="48">48 months</option>
<option value="60">60 months</option>
</select>
</form></td></tr>
<tr>
<td colspan="2"><input type=button onclick="amort('Principle', 'Interest', 'Terms')" value="Calculate!" /></td>
</tr>
</table></fieldset></form></body>
<body><form><table><fieldset>
<legend>Outputs</legend>
<div name="resultsDivId" id="resultsDivId">Results will go here...</div>
</fieldset></table></form></body></html>

I am not sure if that is the only problem but I'm sure if I get that part the rest is simple.

daveVk

1:16 am on Nov 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That looks cleaner, try it, but I don't think getInt() on select control will work, try suggestion from other thread.

look at line 61 of JS, "terms" mentioned ?

zero3ree

1:44 am on Nov 9, 2009 (gmt 0)

10+ Year Member



Ok I added the function for the drop list and added another function to send the result of the amort function to the div in the html. For some reason it still will not work. I swear I have tried everything I can think of. Says calc button is undefined.

JS:
function calcButton(DivId,idPrinciple, idInterest, idTerms,){
var table1 = amort();
setDiv(DivId, table1);
}
function amort(idPrinciple, idInterest, idTerms, idDiv) {
var balance = getInt(idPrinciple);
var interestRate = getInt(idInterest);
var terms = dropList('terms');
var monthlyRate = interestRate / 12;
var payment = balance * (monthlyRate / (1 - Math.pow(1 + monthlyRate, -terms)));
var result = "Loan amount: $" + balance.toFixed(2) + "<br />" + "Interest rate: " +
(interestRate * 100).toFixed(2) +
"%<br />" +
"Number of months: " +
terms +
"<br />" +
"Monthly payment: $" +
payment.toFixed(2) +
"<br />" +
"Total paid: $" +
(payment * terms).toFixed(2) +
"<br /><br />";

result += "<table border='1'><tr><th>Month</th><th>Balance</th>" +
"<th>Interest</th><th>Principal</th>";
var sumInterest = 0;
var sumPrinciple = 0;
for (var i = 1; i <= terms; ++i) {
// variable to calculate interest for each month
var thisInterest = balance * monthlyRate;
sumInterest += thisInterest;
// variable to calculate principle after interest is added and payment is subtracted
var thisPrinciple = payment - thisInterest;
sumPrinciple += thisPrinciple;
// variable to calculate new balance after payment
var thisBalance = balance
balance -= thisPrinciple;

result += "<tr><th>" + i + " </th><th>" + thisBalance.toFixed(2) + "</th>" +
"<th>" +
thisInterest.toFixed(2) +
"</th><th>" +
thisPrinciple.toFixed(2) +
"</th>"
"</table>";
}
{
return result;
}
}
// Function to set the div.
function setDiv(divId, sHtml) {
var div = document.getElementById(divId);
div.innerHTML = sHtml;
div.style.display="block";}
// Function to add to div.
function addToDiv(divId, sHTMLtoAdd) {
var div = document.getElementById(divId);
div.innerHTML += sHTMLtoAdd;
div.style.display="block";}
// Function to grab values.
function getInt(id) {
return parseInt(document.getElementById(id));}

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loan Amortization</title>
<script language="JavaScript" type="text/javascript" src="LoanAmortization2.js">
</script>
<script>
function dropList(myId)
{
var mylist=document.getElementById(myId);
return mylist.options[mylist.selectedIndex].id;
}
</script>
</head>
<body><form><fieldset><table>
<legend>Inputs</legend>
<table cellpadding="5">
<td><label for="principal">Principal:</label></td>
<td><input type="text" name="principalID" id="Principal" size="20" value="6000" /></td>
</tr>
<tr>
<td><label for="interest">Interest rate:</label></td>
<td><input type="text" name="interestID" id="Interest" size="20" value="8.5" /></td>
</tr>
<tr>
<td><label for="Terms">Terms:</td>
<td><form name="mylist">
<select id="terms">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
<option value="48">48 months</option>
<option value="60">60 months</option>
</select>
</form></td></tr>
<tr>
<td colspan="2"><input type=button onclick="calcButton('outputDivId', 'Principle', 'Interest', 'Terms')" value="Calculate!" /></td>
</tr>
</table></fieldset></form></body>
<body><form><table><fieldset>
<legend>Outputs</legend>
<div id="outputDivId" name="output" style="display: block;">Results will go here...</div>
</fieldset></table></form></body></html>

Thank you for the help.

zero3ree

3:57 am on Nov 9, 2009 (gmt 0)

10+ Year Member



Ok I got it. I had to add .value to my getInt function and alter the set up of the calcButton some and I got it. Thank you for you input.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 2:29 am May 14, 2026