I am working on this program that will show interest in an account for each year for 10 years. I want to click on a button and it display the interest for each year for 10 years.

The box shows up but the calcuations do as well. It all comes up at once. I dont know what I am suppose to use for onClick="show()"> that is all I have used in the past so I am lost here!

Here is what I have so far:

<HTML>
<head>
<title> Calcuate interest for 10 years </title>

<script language="javascript">

function a(p,r,n)
{
return (parseFloat(p) * Math.pow( (1+parseFloat(r)), parseInt(n,10) )).toFixed(2);
}


var i=1;
while(i<=10)
{
document.write( i + ". "+ a("1000.00",".05",i) +"<br />");
++i;
}

</script>
</head>
<Body>
<p><input type="button" value="click to calcuate interest for 10 years" onClick="function a(p,r,n)">
</body>
</HTML>

Your problem is that you are trying to run the "a" function in incorrect way. As I understand, the task is that the calculations should be made after clicking on a button? If so, following is fixed code for you (tested in IE 7 and firefox):

<HTML>
<head>
<title> Calcuate interest for 10 years </title>

<script language="javascript">

function a(p,r,n)
{
return (parseFloat(p) * Math.pow( (1+parseFloat(r)), parseInt(n,10) )).toFixed(2);

}

function show() {
	var i=1;
	while(i<=10) {
		document.write( i + ". "+ a("1000.00",".05",i) +"<br />");
		++i;
	}
}

</script>
</head>
<Body>
<p><input type="button" value="click to calcuate interest for 10 years" onClick="show();">
</body>
</HTML>

As you can see I just put the document.write operations into the function and called it from button's onclick event.
Hope that helps.

Below is a complete example of how I would put the a() function that I gave you to use.

You can call show with the number of years as well as the id of the element where you want the results to appear. Example:

<input type="button" onclick="show(5,'myResults');" />


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hielo's Calculations</title>
<script type="text/javascript"><!--

function a(p,r,n)
{
return (parseFloat(p) * Math.pow( (1+parseFloat(r)), parseInt(n,10) )).toFixed(2);
}

function show(years,target)
{
    var i=1;//starting year
    var limit=10;//the default number of years if none specified
    var destination=null;//where to write the  results
    var buffer=[];//to save the partial results

    //check if user specified number of years and if so, override default
    if(parseInt(years,10))
        limit=parseInt(years,10);
    //check if user specified target element to write results and if so, override default
    if("string"==typeof(target))
    {
        destination=document.getElementById(target);
    }
    else//otherwise create a div dinaymically and append it to <body>. The results will be withing <div id='results'></div>
    {

        if( destination=document.createElement("div") )
        {
            destination.id="target";
            document.getElementsByTagName('body')[0].appendChild(destination);
        }
    }

    while(i<=limit)
    {
        buffer[buffer.length] = ( i + ". " + a("1000.00",".05",i) );
        ++i;
    }

    if(destination)
        destination.innerHTML = "<div>"+buffer.join("</div><div>")+"</div>";
    else//this execute only in very old browsers.
        alert(buffer.join("\n"));
}
//--></script>
</head>
<body>
<form>
<input type="button" value="Compute" onclick="show(10,'myResults');"/>
</form>
<div id="myResults"></div>
</body>
</html>

Edited 3 Years Ago by mike_2000_17: Fixed formatting

Hielo, please use code tags when posting code so that your code would be easily legible i.e. wrap your entire code in:

[code] /*your code here */ [/code]

OR

[code=javascript] /*your code here */ [/code]

This article has been dead for over six months. Start a new discussion instead.