Sum of a column (in a Table)

**Stevee** · Sep 17 '07, 01:38 PM

Originally posted by Stevee

Right, I will give that a go and let you know if I managed on Monday.

Thanks.

Right I have been giving that lot a go but still don't think I understand (obviously)

<html>
<head><title>?? ?</title>
[CODE=javascript]
<script type="text/javascript">
function getinfo()
{
var mylist=document .getElementById ("info")
document.getEle mentById("displ ayinfo").innerH TML=mylist.opti ons[mylist.selected Index].value
}

function getinfo1()
{
var mylist=document .getElementById ("info1")
document.getEle mentById("displ ayinfo1").inner HTML=mylist.opt ions[mylist.selected Index].value
}

function getinfo2()
{
var mylist=document .getElementById ("info2")
document.getEle mentById("displ ayinfo2").inner HTML=mylist.opt ions[mylist.selected Index].value
}
</script>

<script type="text/javascript">
function startCalc()
{
one = mylist=document .getElementById ("info").val ue;
two = mylist=document .getElementById ("info1").value ;
three = mylist=document .getElementById ("info2").value ;
TotalValue.valu e = (one * 1) + (two * 1) + (three * 1);
}
</script>

</head>
<body>
<table border="1">
<tr>
<td width="95" align="right">
<select id="info" onchange="getin fo();startCalc( )">
<option selected price=" ">Select</option>
<option value="19.00">U nit 1</option>
<option value="22.00">U nit 2</option>
<option value="25.00">U nit 3</option>
<option value="29.00">U nit 4</option>
<option value="32.00">U nit 5</option>
</select>
</td>
<td width="75" align="right" id="displayinfo "> </td>
</tr>

<tr>
<td width="95" align="right">
<select id="info1" onchange="getin fo1();startCalc ()">
<option selected price=" ">Select</option>
<option value="84.00">N ext 1</option>
<option value="85.00">N ext 2</option>
<option value="86.00">N ext 3</option>
<option value="87.00">N ext 4</option>
<option value="88.00">N ext 5</option>
</select>
</td>
<td width="75" align="right" id="displayinfo 1"> </td>
</tr>

<tr>
<td width="95" align="right">
<select id="info2" onchange="getin fo2();startCalc ()">
<option selected price=" ">Select</option>
<option value="99.00">A gain 1</option>
<option value="92.00">A gain 2</option>
<option value="95.00">A gain 3</option>
<option value="99.00">A gain 4</option>
<option value="92.00">A gain 5</option>
</select>
</td>
<td width="75" align="right" id="displayinfo 2"> </td>
</tr>

<tr>
<td width="95" align="right">T otal = </td>
<td id="TotalValue " width="75" align="right" value=""> </td>
</tr>
</table>

</body>
</html>

[/CODE]

**acoder** · Sep 17 '07, 02:06 PM

Originally posted by Stevee

Right I have been giving that lot a go but still don't think I understand (obviously)

A td element does not have a value attribute. Use innerHTML instead:
[CODE=javascript]document.getEle mentById("Total Value").innerHT ML[/CODE] You should also set the values of the first option of each select rather than using price which will probably result in NaN for the total.

**Stevee** · Sep 18 '07, 10:50 AM

Thank you it now works a treat.

Except, the combo <TD>'s have 2 decimal places and the TotalValue has quite a few more, even though I only put in whole pence?

Regards, Stevee.

[CODE=javascript]
<html>
<head><title>?? ?</title>

<script type="text/javascript">
function getinfo()
{
var mylist=document .getElementById ("info")
document.getEle mentById("displ ayinfo").innerH TML=mylist.opti ons[mylist.selected Index].value
}

function getinfo1()
{
var mylist=document .getElementById ("info1")
document.getEle mentById("displ ayinfo1").inner HTML=mylist.opt ions[mylist.selected Index].value
}

function getinfo2()
{
var mylist=document .getElementById ("info2")
document.getEle mentById("displ ayinfo2").inner HTML=mylist.opt ions[mylist.selected Index].value
}
</script>

<script type="text/javascript">
function startCalc()
{
one = mylist=document .getElementById ("info").val ue;
two = mylist=document .getElementById ("info1").value ;
three = mylist=document .getElementById ("info2").value ;
document.getEle mentById("Total Value").innerHT ML = (one * 1) + (two * 1) + (three * 1);
}
</script>

</head>
<body>
<table border="1">
<tr>
<td width="95" align="right">
<select id="info" onchange="getin fo();startCalc( )">
<option selected value="12">Sele ct</option>
<option value="19.00">U nit 1</option>
<option value="22.00">U nit 2</option>
<option value="25.00">U nit 3</option>
<option value="29.00">U nit 4</option>
<option value="32.00">U nit 5</option>
</select>
</td>
<td width="75" align="right" id="displayinfo "> </td>
</tr>

<tr>
<td width="95" align="right">
<select id="info1" onchange="getin fo1();startCalc ()">
<option selected value=" ">Select</option>
<option value="84.00">N ext 1</option>
<option value="85.00">N ext 2</option>
<option value="86.00">N ext 3</option>
<option value="87.00">N ext 4</option>
<option value="88.00">N ext 5</option>
</select>
</td>
<td width="75" align="right" id="displayinfo 1"> </td>
</tr>

<tr>
<td width="95" align="right">
<select id="info2" onchange="getin fo2();startCalc ()">
<option selected value=" ">Select</option>
<option value="99.00">A gain 1</option>
<option value="92.00">A gain 2</option>
<option value="95.00">A gain 3</option>
<option value="99.00">A gain 4</option>
<option value="92.00">A gain 5</option>
</select>
</td>
<td width="75" align="right" id="displayinfo 2"> </td>
</tr>

<tr>
<td width="95" align="right">T otal = </td>
<td id="TotalValue " width="75" align="right" value=""> </td>
</tr>
</table>

</body>
</html>
[/CODE]

**acoder** · Sep 18 '07, 12:20 PM

Originally posted by Stevee

Thank you it now works a treat.

Except, the combo <TD>'s have 2 decimal places and the TotalValue has quite a few more, even though I only put in whole pence?

On line 30, the 'correct' way to parse strings for numbers is to use parseFloat(). If you do have problems with decimal places, use toFixed on modern browsers.

**Stevee** · Sep 18 '07, 01:11 PM

Originally posted by acoder

On line 30, the 'correct' way to parse strings for numbers is to use parseFloat(). If you do have problems with decimal places, use toFixed on modern browsers.

OK, total lack of knowledge again, where on line 30
I currently have placed it here:
document.getEle mentById("Total Value").innerHT ML = parseFloat(one + two + three);
which still works and has reduced the decimals to 4 places.

Is this Tofixed another script or does it fit neatly (somewhere) into the:
<td id="TotalValue " width="75" align="right">

**acoder** · Sep 18 '07, 01:38 PM

Originally posted by Stevee

OK, total lack of knowledge again, where on line 30
I currently have placed it here:
document.getEle mentById("Total Value").innerHT ML = parseFloat(one + two + three);
which still works and has reduced the decimals to 4 places.

Put it around each value. You could put it on the previous three lines, e.g.
[code=javascript]one = parseFloat(docu ment.getElement ById("info").va lue);[/code]

Originally posted by Stevee

Is this Tofixed another script or does it fit neatly (somewhere) into the:
<td id="TotalValue " width="75" align="right">

See the examples in the link. Use it on the TotalValue.

**Stevee** · Sep 18 '07, 01:59 PM

Originally posted by acoder

Put it around each value. You could put it on the previous three lines, e.g.
[code=javascript]one = parseFloat(docu ment.getElement ById("info").va lue);[/code]
See the examples in the link. Use it on the TotalValue.

[code=javascript]
<script type="text/javascript">
function startCalc()
{
one = parseFloat(myli st=document.get ElementById("in fo").value);
two = parseFloat(myli st=document.get ElementById("in fo1").value);
three = parseFloat(myli st=document.get ElementById("in fo2").value);
document.getEle mentById("Total Value").innerHT ML = parseFloat(one + two + three);
}
</script>
[/CODE]

Now I get the dreaded - NaN

**acoder** · Sep 19 '07, 11:04 AM

Originally posted by Stevee

[code=javascript]
<script type="text/javascript">
function startCalc()
{
one = parseFloat(myli st=document.get ElementById("in fo").value);
two = parseFloat(myli st=document.get ElementById("in fo1").value);
three = parseFloat(myli st=document.get ElementById("in fo2").value);
document.getEle mentById("Total Value").innerHT ML = parseFloat(one + two + three);
}
</script>
[/CODE]

Now I get the dreaded - NaN

You don't need 'mylist=' and you can remove the parseFloat when totalling because they've already been parsed.

**Stevee** · Sep 19 '07, 01:34 PM

Originally posted by acoder

You don't need 'mylist=' and you can remove the parseFloat when totalling because they've already been parsed.

Right, I have tried that again and the TotalValue gives me the NaN
[CODE=javascript]
<script type="text/javascript">
function startCalc()
{
one = parseFloat(docu ment.getElement ById("info").va lue);
two = parseFloat(docu ment.getElement ById("info1").v alue);
three = parseFloat(docu ment.getElement ById("info2").v alue);
document.getEle mentById("Total Value").innerHT ML = (one * 1) + (two * 1) + (three * 1);
}
</script>
[/CODE]

**acoder** · Sep 19 '07, 01:49 PM

Originally posted by Stevee

Right, I have tried that again and the TotalValue gives me the NaN

Instead of a space for the default option values, put 0.

**Stevee** · Sep 19 '07, 02:00 PM

Originally posted by acoder

Instead of a space for the default option values, put 0.

Gotcha, thankyou.

But why when it adds up 2 of the combo numbers ie 19.52 + 100 it equals 119.52

However when I add 3 of the combo numbers ie 19.52 + 100 + 99 it equals 218.51999999999 998

**acoder** · Sep 19 '07, 04:14 PM

Originally posted by Stevee

Gotcha, thankyou.

But why when it adds up 2 of the combo numbers ie 19.52 + 100 it equals 119.52

However when I add 3 of the combo numbers ie 19.52 + 100 + 99 it equals 218.51999999999 998

That's a floating point accuracy problem - see link. Use toFixed() to fix it to 2 decimal places.

**Stevee** · Sep 19 '07, 06:22 PM

Originally posted by acoder

That's a floating point accuracy problem - see link. Use toFixed() to fix it to 2 decimal places.

Sorry, I did no better than a "D" in GCE Math some 31 years ago, and that lot just wasted me. can you assist with the toFix please

**acoder** · Sep 20 '07, 11:55 AM

Originally posted by Stevee

Sorry, I did no better than a "D" in GCE Math some 31 years ago, and that lot just wasted me. can you assist with the toFix please

toFixed is used on a number, so you could do something like:
[CODE=javascript]total = one + two + three;
total = total.toFixed(2 );
document.getEle mentById("Total Value").innerHT ML = total;[/CODE]

**Stevee** · Sep 20 '07, 01:15 PM

Originally posted by acoder

toFixed is used on a number, so you could do something like:
[CODE=javascript]total = one + two + three;
total = total.toFixed(2 );
document.getEle mentById("Total Value").innerHT ML = total;[/CODE]

Thankyou, I had to amend slightly (one * 1) + etc but this works great:

[CODE=javascript]
<script type="text/javascript">
function startCalc()
{
one = document.getEle mentById("info" ).value;
two = document.getEle mentById("info1 ").value;
three = document.getEle mentById("info2 ").value;
total = (one * 1) + (two * 1) + (three * 1);
total = total.toFixed(2 );
four = document.getEle mentById("Total Value").innerHT ML = total;
totalvat = (four / 100 * 17.5) + (four * 1);
totalvat = totalvat.toFixe d(2);
five = document.getEle mentById("Total Vat").innerHTM L = totalvat;
}
</script>
[/CODE]

My biggest problem was how to tell it the number toFix was TotalValue

Sum of a column (in a Table)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment