Javascript loans calculator

tr1cky · 28 Nov 2010 at 20:21

Basically Im trying to make a loans calculator that will display the following in a new window;

Your interest rate is charged at...
Your monthly payment is £
The total interest paid at the end of the loan will be £

I have based my coding from the following link...
http://www.java2s.com/Code/JavaScript/Form-Control/JavaScriptLoanCalculator.htm

I've tried everything I can think of through looking at tutorials and what not... but it just doesnt work.

Anyone can lend a favour and push me in the right direction?

many thanks, dave

Code:

<head><title> Loan Calculator</title></head>
<body>
<center><h1>Welcome to the Loan Calculator</h1></center>

<br>
<p><h4><center>This web page will allow you to calculate the interest rate.</center></h4></p>
<h4><center>Follow the steps below to calculate the interest on the loan you have taken out.</center></h4>
<br>


<center>

<style type="text/css">
<!--
body{	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
}
body {
	background-color: #62B0FF;
}
-->
</style>


<form name="loandata">
  <table>
    <tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
    <tr>

      <td>1)</td>
      <td>Amount of the loan:</td>
      <td><input type="text" name="amount" size="12" 
                 onchange="calculate();"></td>
    </tr>
    <tr>
      <td>2)</td>
      <td>Monthly percentage rate of interest:</td>
      <td><input type="text" name="interest" size="12" 
                 onchange="calculate();"></td>
	
	</td>

    </tr>
    <tr>
      <td>3)</td>
      <td>Repayment period in years:</td>
      <td><input type="text" name="years" size="12" 
                 onchange="calculate();"></td>
    </tr>

    <tr><td colspan="3">


<input type="Submit" value="calculate" onclick="calculate()" >

    </td></tr>
    <tr><td colspan="3">


  </table>


</form>
</center>
</body>

<script language="JavaScript">
	
	function calculate() 
	{


    var amount = document.loandata.amount.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    var x=Math.pow((1+i),(-payments));
    var y=1-x;
    var z=amount*(i/y);

	
	newWin=window.open ('','NewWindow', 'width=500,height=400');

	newWin.document.write("</br>" + "<b>Your monthly payment is £</b>" + sterling   + "</br>");
		
	newWin.document.write("</br>" + "<b>Your interest rate is charged at </b>" + finalinterest() +"%" + " over " + (payments) + " months" + "</br>");
				
	newWin.document.write("</br>" + "<b>The total interest paid at the end of the loan will be £</b>" + sterling (((z * payments)-amount)));
	
	newWin.document.close(); " >



</script>
	
	
	
<script language="JavaScript" type="text/javascript">

function finalinterest()
{

if (loandata.amount.value <=4000)
{
   i=9.9

}
else if ((loandata.amount.value >4000) && (loandata.amount.value<=10000))
{
   i=7.9

}
else if ((loandata.amount.value >10000) && (loandata.amount.value<=14000))
{
   i=5.9

}
else if ((loandata.amount.value >14000) && (loandata.amount.value<=20000))
{
   i=4.9

 }
else if (loandata.amount.value>=20000)
{
   i=4.0

}
return i;
}



</script>


</html>

fez · 28 Nov 2010 at 21:24

Biggest issue is the missing } after the calculate method mate. There are a lot of syntax issues such as missing var declarations, misidentified references to input field values.

Grab firefox and firebug and go debugging dude.

Is this just something you want to work or are you looking to learn something from it too?

Coldzero · 28 Nov 2010 at 21:26

No starting <html> tag either.

tr1cky · 28 Nov 2010 at 21:32

fez said:
Biggest issue is the missing } after the calculate method mate. There are a lot of syntax issues such as missing var declarations, misidentified references to input field values.

Grab firefox and firebug and go debugging dude.

Is this just something you want to work or are you looking to learn something from it too?

Cheers mate, im just installing firebug now. Well I need it working but also need to learn from it too. Not sure where you mean to add the } ??

Could you point out which var's im missing?

added <html> tab dunno why that was missing!

fez · 28 Nov 2010 at 21:35

Just a few quick things.

Code:

function calculate() {
    var amount = document.loandata.amount.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    var x=Math.pow((1+i),(-payments)); // Here you are referencing 'i' which has not been declared or assigned a value from the other method.
    var y=1-x;
    var z=amount*(i/y);

	
	newWin=window.open ('','NewWindow', 'width=500,height=400');

	newWin.document.write("</br>" + "<b>Your monthly payment is £</b>" + sterling   + "</br>");
		
	newWin.document.write("</br>" + "<b>Your interest rate is charged at </b>" + finalinterest() +"%" + " over " + (payments) + " months" + "</br>");
				
	newWin.document.write("</br>" + "<b>The total interest paid at the end of the loan will be £</b>" + sterling (((z * payments)-amount)));
	
	newWin.document.close(); " > // There are some characters after the semicolon which denotes the end of a line in javascript. Cant have " > there.

    } // this is where you need the extra } to close the method.

As mentioned above, pop a <html> tag at the top of the document.

Have a look at the bits I have commented on and see if you understand why there is an issue there. Give us a shout if you need some more help.

tr1cky · 28 Nov 2010 at 21:49

Cheers fez,

Sorted them changes out, still unsure what i've gotta do with the i method tho. And not to sure what you mean with regards to the document.close section, should I just remove it? Also when the calculate button is clicked it doesn't even open a new window let alone perform the calcuations??

fez · 28 Nov 2010 at 22:13

It isnt working because the form is posting to itself when you click submit which will reload the current page. This might not be such an issue if the window was appearing but the errors are stopping that happening.

I have had a little play but there are some big holes in there at the moment. Have a look at the blow and explain what should be happening where I have asked a question in the code.

Code:

<html>
<head><title> Loan Calculator</title></head>
<body>
<center><h1>Welcome to the Loan Calculator</h1></center>

<br>
<p><h4><center>This web page will allow you to calculate the interest rate.</center></h4></p>
<h4><center>Follow the steps below to calculate the interest on the loan you have taken out.</center></h4>
<br>


<center>

<style type="text/css">
<!--
body{	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
}
body {
	background-color: #62B0FF;
}
-->
</style>


<form name="loandata" onSubmit="calculate()">
  <table>
    <tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
    <tr>

      <td>1)</td>
      <td>Amount of the loan:</td>
      <td><input type="text" name="amount" size="12"></td>
    </tr>
    <tr>
      <td>2)</td>
      <td>Monthly percentage rate of interest:</td>
      <td><input type="text" name="interest" size="12"></td>
	
	</td>

    </tr>
    <tr>
      <td>3)</td>
      <td>Repayment period in years:</td>
      <td><input type="text" name="years" size="12"></td>
    </tr>

    <tr><td colspan="3">


<input type="Submit" value="calculate">

    </td></tr>
    <tr><td colspan="3">


  </table>


</form>
</center>
</body>

<script language="javascript" type="text/javascript">
	
	function calculate(){
    var i = finalInterest();
    
    var amount = document.loandata.amount.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    //Here is where the problem is, what is supposed to happen here, below you are referencing a variable called sterling. 
    //There is nothing here about that variable until it is used in the new window below. It doesnt exist.
    //If you explain the maths here then ill have a play.

    var x=Math.pow((1+i),(-payments));
    var y=1-x;
    var z=amount*(i/y);

	
	newWin=window.open ('','NewWindow', 'width=500,height=400');

	newWin.document.write("</br>" + "<b>Your monthly payment is &pound;</b>" + sterling   + "</br>");
		
	newWin.document.write("</br>" + "<b>Your interest rate is charged at </b>" + finalinterest() +"%" + " over " + (payments) + " months" + "</br>");
				
	newWin.document.write("</br>" + "<b>The total interest paid at the end of the loan will be £</b>" + sterling (((z * payments)-amount)));
	
	//newWin.document.close();
}


</script>
	
	
	
<script language="javascript" type="text/javascript">

function finalInterest(){

  var i = 10; // Set this to a default value to denote that none of the conditions below were met.
  
  if (loandata.amount.value <=4000){
     i=9.9;
  }else if ((loandata.amount.value >4000) && (loandata.amount.value<=10000)){
     i=7.9;
  }else if ((loandata.amount.value >10000) && (loandata.amount.value<=14000)){
     i=5.9;
  }else if ((loandata.amount.value >14000) && (loandata.amount.value<=20000)){
     i=4.9;
  }else if (loandata.amount.value>=20000){
     i=4.0;
  }
  
  return i;
}



</script>


</html>

tr1cky · 28 Nov 2010 at 22:40

I missed out a function:

Code:

function sterling 
{
return Math.round(x*100)/100;
}

which is used to make the result pounds and pence.

As for the math I was given;
this formula

monthly payment = amount of loan multiplied by

(where i =MAY/1-/199, n = number of repayments)

That code is what I came up with from the forumala?? doubtful thats its correct!

many thanks man

SimonCHere · 29 Nov 2010 at 10:08

x will not be in scope for that function.
make it

Code:

function sterling(inVar)
{
 return Math.round(inVar*100)/100;
}

and then change the line in you code that writes it out to

Code:

newWin.document.write("</br>" + "<b>Your monthly payment is &pound;</b>" + sterling(x)   + "</br>");

tr1cky · 29 Nov 2010 at 10:30

Thank Simon, I've made them changes. Any idea how to get it working? It only seems to produce

Your monthly payment is £0

when I attempt a calculation.

SimonCHere · 29 Nov 2010 at 12:04

You are going to have to put some alerts(); into the code to see where it is failing.

Code:

alert("i: " + i);
alert("Amount: " + amount);
alert("Interest: " + interest);
alert("Payments: " + payments);
alert("x: " + x);
alert("y: " + y);
alert("z: " + z);

And see what you get.

tr1cky · 29 Nov 2010 at 12:22

Hey mate im not sure what you been? where abouts do I add the alerts and how do I run them??

Also I have removed the Monthly percentage rate of interest: textbox as it is not required because of the if statement. Here is my updated code.. still not working tho.

Code:

<html>
<head><title> Loan Calculator</title></head>
<body>
<center><h1>Welcome to the Loan Calculator</h1></center>

<br>
<p><h4><center>This web page will allow you to calculate the interest rate.</center></h4></p>
<h4><center>Follow the steps below to calculate the interest on the loan you have taken out.</center></h4>
<br>


<center>

<style type="text/css">
<!--
body{	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
}
body {
	background-color: #62B0FF;
}
-->
</style>


<form name="loandata" onSubmit="calculate()">
  <table>
    <tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
    <tr>

      <td>1)</td>
      <td>Amount of the loan:</td>
      <td><input type="text" name="amount" size="12"></td>
    </tr>
   
    <tr>
      <td>2)</td>
      <td>Repayment period in years:</td>
      <td><input type="text" name="years" size="12"></td>
    </tr>

    <tr><td colspan="3">


<input type="Submit" value="Calculate">

    </td></tr>
    <tr><td colspan="3">


  </table>


</form>
</center>
</body>

<script language="javascript" type="text/javascript">
	
	function calculate(){
    var i = finalInterest();
    
    var amount = document.loandata.amount.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;


    var x=Math.pow((1+i),(-payments));
    var y=1-x;
    var z=amount*(i/y);

	
	newWin=window.open ('','NewWindow', 'width=500,height=400');

	newWin.document.write("</br>" + "<b>Your monthly payment is &pound;</b>" + sterling(x)   + "</br>");
		
	newWin.document.write("</br>" + "<b>Your interest rate is charged at </b>" + finalinterest() +"%" + " over " + (payments) + " months" + "</br>");
				
	newWin.document.write("</br>" + "<b>The total interest paid at the end of the loan will be £</b>" + sterling(x) (((z * payments)-amount)));
	
	
	
	//newWin.document.close();
}



function sterling(inVar)
{
 return Math.round(inVar*100)/100;
}


</script>
	
	
	
<script language="javascript" type="text/javascript">

function finalInterest(){

  var i = 10; 
  
  if (loandata.amount.value <=4000){
     i=9.9;
  }else if ((loandata.amount.value >4000) && (loandata.amount.value<=10000)){
     i=7.9;
  }else if ((loandata.amount.value >10000) && (loandata.amount.value<=14000)){
     i=5.9;
  }else if ((loandata.amount.value >14000) && (loandata.amount.value<=20000)){
     i=4.9;
  }else if (loandata.amount.value>=20000){
     i=4.0;
  }
  
  return i;
}


</script>


</html>

SimonCHere · 29 Nov 2010 at 12:45

There are still a few things wrong with it.
Firstly you no longer need interest variable, take out the
var interest = (document.loandata.interest.value / 100 / 12);
line.

the reason it is return 0 is because you calculation for x is wrong. for £10,000 over 10 years x= 1.1835843188312848e-114 which is too big for the sterling function to work with.

what should this bit in your description of the calculation be?

"(where i =MAY/1-/199, n = number of repayments)"

also if you don't know what alert(); does by now you should really be paying more attention in the lessons.

Looking at the code link you are trying to copy, your finalInterest() function isn't working out the correct amount. for 10,000 is it returning 5.9 where as it should be returning 5.9/100/12 which is what the var interest line you copied is doing in the original.

SimonCHere · 29 Nov 2010 at 13:11

Code:

<script language="javascript" type="text/javascript">
	
	function calculate(){
	    var interest = calcInterest();
        var principle = document.loandata.amount.value;
	    var payments = document.loandata.years.value * 12;

		var x=Math.pow(1+interest,payments);
		var monthly =(principle*x*interest)/(x-1);
		
		alert("Monthly: " + monthly);
		
		newWin=window.open ('','NewWindow', 'width=500,height=400');
		newWin.document.write("</br>" + "<b>Your monthly payment is &pound;</b>" + sterling(monthly)   + "</br>");
		newWin.document.write("</br>" + "<b>Your interest rate is charged at </b>" + interest *100 *12 +"%" + " over " + payments + " months</br>");
		newWin.document.write("</br>" + "<b>The total interest paid at the end of the loan will be £</b>" + sterling((monthly*payments)-principle));
	}

	function sterling(inVar)
	{
	 return Math.round(inVar*100)/100;
	}

	function calcInterest(){

	  var i = 10; 
	  
	  if (loandata.amount.value <=4000){
		 i=9.9;
	  }else if ((loandata.amount.value >4000) && (loandata.amount.value<=10000)){
		 i=7.9;
	  }else if ((loandata.amount.value >10000) && (loandata.amount.value<=14000)){
		 i=5.9;
	  }else if ((loandata.amount.value >14000) && (loandata.amount.value<=20000)){
		 i=4.9;
	  }else if (loandata.amount.value>=20000){
		 i=4.0;
	  }
	  
	  return i/100/12;
	}

</script>

tr1cky · 29 Nov 2010 at 13:45

I dont understand how its producing 87.87 when i enter 1000 and 1 year.. shouldn't it be 99? From your above code.

SimonCHere · 29 Nov 2010 at 14:46

tr1cky said:
I dont understand how its producing 87.87 when i enter 1000 and 1 year.. shouldn't it be 99? From your above code.

No?

If I didn't pay anything for 12 months then it would be £99. But I'm paying £87.87 a month so the principle is reduced.

tr1cky · 29 Nov 2010 at 15:02

SimonCHere said:
No?

If I didn't pay anything for 12 months then it would be £99. But I'm paying £87.87 a month so the principle is reduced.

Thank you mate, cheers for the patience! Will have to get my head into w3schools.