My js function not adding perfectly

[eloginko]

As you can see there is a value already on the (total)textbox which i filtered on a table...and if i type a number on the (score)textboxes it will automatically add on the current value of the total(textbox).

My problem is its not adding perfectly...can anyone help me please.

example:

http://s38.photobucket.com/user/eloginko/media/score_zps43f9daaa.jpg.html

html code:

<form id="frm" name="frm" />
<table>
<tr>
<td>
Name: <br />
<input type="text" name="name" value="<?php if(empty($name[0])){$name[0] = array(NULL);}else{echo $name[0];} ?>" readonly /> <br />
</td>
<td>
Score 1: <br />
<input type="text" name="optA" value="" onchange="optTotal()" /> <br />
</td>
<td>
Score 2: <br />
<input type="text" name="optB" value="" onchange="optTotal()" /> <br />
</td>
<td>
Score 3: <br />
<input type="text" name="optC" value="" onchange="optTotal()" /> <br />
</td>
<td>
Score 4: <br />
<input type="text" name="optD" value="" onchange="optTotal()" /> <br />
</td>
<td>
Total: <br />
<input type="text" name="totals" value="<?php if(empty($total[0])){$total[0] = array(NULL);}else{echo $total[0];} ?>" readonly onKeyUp="optTotal()" /> <br />
</td>
</form>

total calculation script:

<script>
function optTotal() {
        var a1 = document.forms[0].optA;
        var b1 = document.forms[0].optB;
        var c1 = document.forms[0].optC;
        var d1 = document.forms[0].optD;
        var xtotal = document.forms[0].totals;
        if (a1.value && a1.value != "")
            a1 = parseFloat(a1.value);
        else
            a1 = 0;

        if (b1.value && b1.value != "")
            b1 = parseFloat(b1.value);
        else
            b1 = 0;

        if (c1.value && c1.value != "")
            c1 = parseFloat(c1.value);
        else
            c1 = 0;

        if (d1.value && d1.value != "")
            d1 = parseFloat(d1.value);
        else
            d1 = 0;
        if (xtotal.value && xtotal.value != "")
            xtotal = parseFloat(xtotal.value);
        else
            xtotal = 0;

        var total = a1 + b1 + c1 + d1 + xtotal;
        document.forms[0].totals.value = total;

      }
</script>

[JorgeM]

the problem i see here in your logic is that every time the function executes, you are taking the current total value in this line7:

var xtotal = document.forms[0].totals;

So even if you change the value in one of the columns, you are using this new value in the total box that was already calculated based on your previous input.

You would have to store the orginal value in two places. Like an orginal value and then the updated value based on the current input. You can have two textboxes. One to hold the orginal value and another to hold the updated (calculated) value. Or if you only want to show one text box, store the original value in another input field, but of type hidden.

You can add a hidden element.

<input type="hidden" name="originalTotal" value="<?php if(empty($total[0])){$total[0] = array(NULL);}else{echo $total[0];} ?>" />

Then update line 7.

var xtotal = document.forms[0].originalTotal;