CodingForums.com - Hi, all: I need help with this question

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Hi, all: I need help with this question (http://www.codingforums.com/showthread.php?t=224294)

Hi, all: I need help with this question

Hi, all:
I've been trying to insert a Loop into my javascript codes so that for the table I am creating :
every previous year's ending total amount becomes next year's beginning principal. The webpage interface should be like:

PHP Code:


		
			
a button functions a calculation here says "Calculate"

Principal          Period            Rate              Total Amount

input txtbox     input txtbox    input txtbox

so, if the user input "8" into the period textbox, the output should generate 8 additional rows displaying every year's amount.

create a Web site made up a single or two pages depending on how you implement it. That page(s) will use JavaScript to calculate the interest on a savings account. The page should have an input section in which the user enters the following values:
The initial amount deposited in a savings account.
The number of periods.
The interest rate per period.
Create a button on the page. When the user clicks the button, you should create a tabular interest rate schedule such that there is one row for each period. This table output might look something like:

PHP Code:


		
			
Principal   Period  Rate    Total Amount 

100.00      1       0.01     101.00 

101.00      2       0.01     102.01 

...            ...       ...        ...

...

Adhere to the following as you create the page(s)

You can display the output in either a table or you can use CSS.
Below the table, display the total interest received.
You can display the table in a new Web page or on the same Web page containing the input controls.
Make sure that the page(s) are well-formed and well formatted.

I will be grateful if you help me out. Honestly, it took me days, I still can not figure it out. so sad.

You are going to have to post some code examples before anyone can help you.

I messed it up, so my code does not generate the headers. and does no calculation.

<head>
<title></title>
<script type="text/javascript">

var x = document.getElementById("tblDemo");
x.style.border = "solid";
x.style.borderColor = "#FFFFCC";
x.style.backgroundColor = "#CCFFCC";

var row = x.insertRow();
row.style.width = "200px";
row.style.border = "solid";
row.style.borderColor = "gray";

var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "Amount";

var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "Period";

var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "Rate";
var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "New Amount";

var principle = document.forms["Myform"]["principle"].value
var period = document.forms["Myform"]["period"].value
var rate = document.forms["Myform"]["rate"].value

}
function calculate () {
newamount = principle * ((rate / 100) + 1)

}

</script>
</head>
<body>
<table id="tblDemo">
</table>
<form name="Myform" action="">
<fieldset>
<input type="text" name="principle" />
<input type="text" name="period" />
<input type="text" name="rate" />
<input type="button" value="Create Table" />

</fieldset>

<fieldset>
<input type="button" id="calculate" value="Calculation"
onclick="createRow ()" />

</fieldset>

</form>

</body>

Form element values are returned as text:

Code:

var principle = parseFloat(document.forms["Myform"]["principle"].value);

var period = parseInt(document.forms["Myform"]["period"].value);

var rate = parseFloat(document.forms["Myform"]["rate"].value);

Code:

onclick="createRow ()" /> 

I assume you've omitted 'function createRow() {' from your JavaScript when copying and pasting?

Ok, but how to do the loop? l think it deals with Dim variables. I do not know how that works. Would somebody post the actual complete code to show me?

Quote:

Would somebody post the actual complete code to show me?

Homework.. ?!

JavasScript doesn't use 'Dim' - that's Visual Basic - it uses 'var'.

The following demonstrates a looping structure:

Code:

function createRows(noOfRows) {

    var x;

    for (x=0; x < noOfRows; x++ ) {

        // obtain or calculate principal, period, etc..

        // add a row to the table, 

        // inserting the principal, etc., into the correct cells as you go

        // (you already have some code that inserts a row)

    }

}