AppendChild and for loop issue

Question

I am having two issues that I have not been able to figure out. I am using javascript to calculate compound interest. My formula for calculating the interest works, but I need a tabular interest rate schedule to appear after the calculations (to show period by period the amount of money accrued each time) and then a final total and total interest amount. This is what my code looks like:

<head>
    <title></title>
<script type="text/javascript">
    function rateSched(amnt, prd, rte, namt) {
        for (i = 0; i < periods; i++) {
            if (!document.getElementsByTagName) return;
            tabBody = document.getElementsByTagName("tbody").item(0);
            row = document.createElement("tr");
            cell1 = document.createElement("td");
            cell2 = document.createElement("td");
            cell3 = document.createElement("td");
            cell4 = document.createElement("td");
            textnode1 = document.createTextNode(amnt);
            textnode2 = document.createTextNode(prd);
            textnode3 = document.createTextNode(rte);
            textnode4 = document.createTextNode(namt);
            cell1.appendChild(textnode1);
            cell2.appendChild(textnode2);
            cell3.appendChild(textnode3);
            cell4.appendChild(textnode4);
            row.appendChild(cell1);
            row.appendChild(cell2);
            row.appendChild(cell3);
            row.appendChild(cell4);
            tabBody.appendChild(row);
        } 
    }
    var deposit;
    var periods;
    var interest;
    var newamount = deposit * (Math.pow(1 + interest, periods) - 1) / interest;
    var i=0;

    function calcAmt(form1) {
        deposit = form1.dp.value;
        interest = form1.rt.value;
        periods = form1.pr.value;
        form1.amt.value = Math.round(deposit * (Math.pow((1 + interest / 100), periods)) * 100) / 100;
        form1.intr.value = Math.round((deposit * (Math.pow((1 + interest / 100), periods)) - deposit) * 100) / 100
    }
</script>
</head>
<body>
<center>
    <form method="get" name="form1" onreset="form1.dp.focus()">

    <table border="5" bgcolor="#BDBDBD" cellpadding="2" width="300px">
    <tr><td colspan="2" align="center">
    <b><font size="5" color="#4B088A">Compound Interest</font></b>
    </td></tr>

    <tr><td align="right">Initial Deposit</td><td>
    <input type="text" name="dp" value=""/></td></tr>

    <tr><td align="right">Interest Rate (% Value)</td><td>
    <input type="text" name="rt" value=""/></td></tr>

    <tr><td align="right">Periods</td><td>
    <input type="text" name="pr" value=""/></td></tr>

    <tr><td align="right">Final Amount</td><td>
    <input type="text" name="amt" value=""/></td></tr>

    <tr><td align="right">Total Interest</td><td>
    <input type="text" name="intr" value=""/></td></tr>

    <tr><td>
    <input type="button" name="calc" value="Calculate" size="13" onclick="calcAmt(form1);rateSched(deposit,interest,i,newamount);return false;"/></td>

    <td></td></tr>
    </table>
    </form>

    <br />

    <table border='1' width="300px">
    <tbody>
    <tr><td>Amount</td><td>Period</td><td>Rate</td><td>New Amount</td></tr>
    </tbody>
    </table>

    <br />

    <table>
    <tr><td align="right">Final Amount</td><td>
    <input type="text" name="amt" value="" size="13"/></td></tr>

    <tr><td align="right">Total Interest</td><td>
    <input type="text" name="intr" value="" size="13"/></td></tr>
    </table>

    </center>
</body>
</html>

My problems are that the new table rows should be appended to the lower, four column table instead of the upper one, they should display each period as it goes instead of identical columns, and the bottom "Final Amount" and "Total Interest" do not fill in with the onclick.

Edit: Latest version of code having troubles with as described in comments:

function calcAmt(form1) { 
    var newamount = deposit * (Math.pow(1 + interest, periods) - 1) / interest; 
    deposit = form1.dp.value; 
    interest = form1.rt.value; 
    periods = form1.pr.value; 
    form1.amt.value = Math.round(deposit * (Math.pow((1 + interest / 100), periods)) * 100) / 100; 
    form1.intr.value = Math.round((deposit * (Math.pow((1 + interest / 100), periods)) - deposit) * 100) / 100 
}

Answer 1

To target the right tbody tag, you should put an ID on it and use document.getElementById("xxx") as this will guarentee you get the right one without relying on a particular position index in your HTML document.

FYI, all tables have a tbody tag whether it's in your HTML or not.

You can see how I use document.getElementById("results") to get the results going into the right table here: http://jsfiddle.net/jfriend00/MqMtd/

Also, all variables inside a function that you intend to be local variables (not globals) should have var in front of them. You are using a lot of implicit globals (variables never explicitly declared) which is a very bad practice.

The value of newAmount is not valid because the code that initializes it runs before the variables that it depends on are filling in. I'd suggest you set the value of newAmount in calcAmt() where the other values it depends upon are set.

AppendChild and for loop issue

Question

1 answers

solution1
1 ACCPTED 2012-04-13 05:44:51

AppendChild and for loop issue

Question

1 answers

solution1 1 ACCPTED 2012-04-13 05:44:51

solution1
1 ACCPTED 2012-04-13 05:44:51