JavaScript - 将新字段添加到现有字段

Question

I am having a hard time with this homework.
Trying to keep adding the multiplication of the new 2 fields the user will add.

Example:

first field 5 second field 5 = total is 5*5 = 25

But when the user clicks the add field, he would have:

first field = 5 second field 5
first field = 6 second field 6 total would be 5*5 + 6*6 = 61 and so forth

<script>
    function calc(form) {
        var box1 = parseFloat (form.leftover.value,10)
        var box2 = parseFloat (form.charge.value,10)

        var temp = new Array();
        var Mbalance = ( box1 * box2 ) ; 
        temp.push(Mbalance) ; 

        for ( var i=0; i< temp.length ; i++ ) {
            Mbalance = Mbalance+Mbalance ; 
        }

        form.mbalance.value= Mbalance ; 
    }

    // This script is identical to the above JavaScript function.

    var ct = 1;

    function new_link(form) {
        ct++ ; 
        var div1 = document.createElement('div');
        div1.id = ct;
        // Link to delete extended form elements
        div1.innerHTML = document.getElementById('newlinktpl').innerHTML ;
        document.getElementById('newlink').appendChild(div1);
    }

</script>
</script>

<form> 
<div id="newlink">
<div>
    <td width="423">What was the balance left over from last month ?</td>
    <td width="19">$</td>
    <td width="141"><input  name="leftover" value="" maxlength="10" /></td>
    </tr>
    <tr>
    <td>How much did you charge this month ?</td>
    <td>$</td>
    <td><input  name="charge" value="" maxlength="10" /></td>
    <br/>
    </div></div>
    <button type="submit" id="buttoncalculate"  onclick="calc(this.form); return false; "></button>
    <br />
    <td width="462">Monthly Balance</td>
    <td width="128"><input  name="mbalance" value="" maxlength="10" /></td>
    <a href="javascript:new_link()">Add new </a>
</form>
<form>
    <!-- Template -->
    <div id="newlinktpl" style="display:none">
        <div>
            <td width="423">What was the balance left over from last month ?</td>
            <td width="19">$</td>
            <td width="141"><input  name="leftover" value="" maxlength="10" /></td>
            </tr>
            <tr>
            <td>How much did you charge this month ?</td>
            <td>$</td>
            <td><input  name="charge" value="" maxlength="10" /></td>
        </div>
    </div>
<form>

Answer 1

Here's one way you can do it. It's not necessarily the best, but it achieves what you want and I don't feel like completely rewriting what you had:

http://jsfiddle.net/HS6dt/2/

I added a class to the parent div of your two inputs as well as your two inputs. That way I can find the parent div, then find the descendant inputs, get their values and multiple them (note: I have no idea why you are multiplying those two values, it really doesn't make much sense, but whatever):

function calc(form) {
    var total = 0;
    var items = document.getElementsByClassName("item");

    for (var i = 0; i < items.length; i++) {
        var left = items[i].getElementsByClassName("leftover");
        var charge = items[i].getElementsByClassName("charge");
        total += parseFloat(left[0].value, 10) * parseFloat(charge[0].value, 10);
    }
    form.mbalance.value = total;
}