javascript calculator

**rizla111** · 11-04-2010 10:27 PM

Hey

I'm having trouble with my form. I'm trying to make it so that when you click calculate, it calls the function calculate however something appears to be wrong with my javascript. When you click the calculate button, nothing pops up at all.

Can someone please help me out? It probably is something small, I just can't figure it out.

Thanks
Riz

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="mystyles.css" rel="stylesheet" type="text/css" />

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="navigation.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"> 
    
function info()
{
	var principal=parseFloat(document.calculate.principal.value);
	var i;
	var x=0;
	var interest=parseFloat(document.calculate.interestrate.value);
	for (i=0; i<document.calculate.length;i++)
	{
		if (document.calculate[i].checked)
		{
			x=parseFloat(document.calculate[i].value);
			if (i==1)
			{
				n=12;
			}
			if(i==2)
			{
				n=24;
			}
			if(i==3)
			{
				n=36;
			}
			if(i==4)
			{
				n=48;
			}
			if(i==5)
			{
				n=60;
			}
	}
	}


	var total=principal*(Math.pow(1+interest),n);

	alert(total+" is the monthly payment");
}
</script>

<title>Novobank</title>
</head>

<body>
<p><img src="rock garden.jpg" width="980px" height="328" alt="logo" />
</p>
<p>&nbsp;</p>
<p><strong>NowTech<br />
204-1108 15st SW<br />
Calgary, AB<br />
T3C 1E8<br />
1-800-555-9067</strong></p>
<ul id="nav">
	<li><a href="index.html">About Us</a></li>
	<li><a href="prices.html">Prices</a></li>
	<li><a href="order.html">Orders</a></li>
	<li><a href="contact.html">Consultation</a></li>
</ul>
<br />
<br />
<form name="calculator" method="post"> 
  <p><table width="200" border="1" cellpadding="4">
  <tr>
    <td><label for="principal">Principal Value</label></td>
    <td><input type="text" name="principal" id="principal"/>
      </td>
  </tr>
  <tr>
    <td><p>Years<br />
      </p></td>
    <td><label>
      <input type="radio" name="RadioGroup1" value="2" id="RadioGroup1_0" />
      2yr</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="3" id="RadioGroup1_1" />
        3yr</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="4" id="RadioGroup1_2" />
        4yr</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="5" id="RadioGroup1_3" />
        5yr</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="10" id="RadioGroup1_4" />
      10yr</label></td>
  </tr>
  <tr>
    <td><label for="interestrate">Interest Rate(4-11%)</label></td>
    <td><input type="text" name="interestrate" id="interestrate" /></td>
  </tr>
  <tr>
    <td><label for="total">Total</label></td>
    <td><input type="text" name="total" id="total" /></td>
  </tr>
  <tr>
    <td><label for="calculate">Calculate</label></td>
    <td><input type="text" name="calculate" id="calculate" /></td>
  </tr>
  <tr>
    <td><input type="button" name="calculateButton" id="calculateButton" value="Calculate" onClick="calculatePrincipal(this.form);"/></td>
    <td>&nbsp;</td>
  </tr>
  
  </table>
  <br />
</p>
</form>

</body>
</html>

**JMRKER** · 11-04-2010 10:42 PM

You have not defined anything to happen.

Code:

    <td><input type="button" name="calculateButton" id="calculateButton" value="Calculate" onClick="calculatePrincipal(this.form);"/></td>

Where have you defined the onClick event?

**rizla111** · 11-04-2010 11:07 PM

i thought it would just be defined with this

Code:

onClick="calculatePrincipal(this.form);"

do you need form action=onClick ??

**JMRKER** · 11-05-2010 08:49 AM

Since computer chips are of silicon and stuff which comes from the ground, they are basically dumb as dirt.

I don't see your function calculatePrinicple defined anywhere.
The program cannot make it up for you, you need to create it!

**rizla111** · 11-05-2010 10:49 AM

sorry function info should be function calculatePrincipal();
my bad.
but that's not the problem because I've changed it before and it still didn't work.
Their is a problem with the code itself.

**Kor** · 11-05-2010 11:05 AM

Code:

document.calculate[i] //  ?

Take care: you have a form named calculator and an element of the form named calculate. I guess you have confounded and mismatched their names.
You you don't handle too well the short syntax, you better use the full one:

Code:

document.forms['formname'].elements['elementname']

Thread: javascript calculator

Thread Tools

Display

javascript calculator

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions