View Full Version : javascript addition

08-15-2007, 11:25 AM
Hi, I am trying to automate some addition and multiplication.

[no.1] + [no.2] = [total 1]
[no.3] + [no.4] = [total 2]
[no.5] + [no.6] = [total 3]
[no.7] + [no.8] = [total 4]

subtotal 1 = [total 1 + total 2 + total 3 + total 4]

subtotal 2 = [subtotal 1 divided by 16]

TOTAL = [subtotal 2 multiplied by 10]

Ideally, I would have the user enter the nos. 1 to 8 and hit a single button to get totals 1 to 4, the two subtotals, and the TOTAL showing in input boxes.

Before I attempt this mini project, is it possible do you think? Or does it have to be done by hitting more than one button?

I have no idea where to start.

Happy to pay someone to get this totals thing finished. Three years on this major project and I have to get it all done by next month.


Philip M
08-15-2007, 11:54 AM
Is this what you require?


<form name = "myform">

<p>Number 1 <input type = "text" name = "no1" id = "no1" size = "6"></p>
<p>Number 2 <input type = "text" name = "no2" id = "no2" size = "6"></p>
<p>Total 1 <input type = "text" name = "total1" id = "total1" size = "6" readonly></p>
<p>Number 3 <input type = "text" name = "no3" id = "no3" size = "6"></p>
<p>Number 4 <input type = "text" name = "no4" id = "no4" size = "6"></p>
<p>Total 2 <input type = "text" name = "total2" id = "total2" size = "6" readonly></p>
<p>Number 5 <input type = "text" name = "no5" id = "no5" size = "6"></p>
<p>Number 6 <input type = "text" name = "no6" id = "no6" size = "6"></p>
<p>Total 3 <input type = "text" name = "total3" id = "total3" size = "6" readonly></p>
<p>Number 7 <input type = "text" name = "no7" id = "no7" size = "6"></p>
<p>Number 8 <input type = "text" name = "no8" id = "no8" size = "6"></p>
<p>Total 4 <input type = "text" name = "total4" id = "total4" size = "6" readonly></p>

<input type ="button" name = "button1" value = "Click to calculate" onclick = "calculate()">

<p>SubTotal1 <input type = "text" name = "sub1" id = "sub1" size = "10" readonly></p>
<p>SubTotal2 <input type = "text" name = "sub2" id = "sub2" size = "10" readonly></p>
<p>GRAND TOTAL <input type = "text" name = "gdtotal" id = "total" size = "10" readonly></p>

<script type = "text/javascript">

function calculate() {
var No1 = parseFloat(document.myform.no1.value);
var No2 = parseFloat(document.myform.no2.value);
var No3 = parseFloat(document.myform.no3.value);
var No4 = parseFloat(document.myform.no4.value);
var No5 = parseFloat(document.myform.no5.value);
var No6 = parseFloat(document.myform.no6.value);
var No7 = parseFloat(document.myform.no7.value);
var No8 = parseFloat(document.myform.no8.value);

var Total1= No1 + No2;
var Total2= No3 + No4;
var Total3= No5 + No6;
var Total4= No7 + No8;

document.myform.total1.value = Total1;
document.myform.total2.value = Total2;
document.myform.total3.value = Total3;
document.myform.total4.value = Total4;

var Sub1 = Total1 + Total2 + Total3 + Total4;
var Sub2 = Sub1/16;
var Total = Sub2 *10;

document.myform.sub1.value = Sub1;
document.myform.sub2.value = Sub2;
document.myform.gdtotal.value = Total;



You may want to add checks to ensure that the user enters (valid) numbers in the boxes (i.e. valid range, not negative etc.)


function checkvalid(which) {
if (isNaN(which.value) || (which.value <0) || (which.value > 99)) {
alert ("Invalid entry");
which.value = "";

08-15-2007, 12:01 PM
How about this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title> New Document </title>
<script type="text/javascript">
function calcTotals(frm){
var total1 = frm.total1.value = getNum(frm.no1.value) + getNum(frm.no2.value);
var total2 = frm.total2.value = getNum(frm.no3.value) + getNum(frm.no4.value);
var total3 = frm.total3.value = getNum(frm.no5.value) + getNum(frm.no6.value);
var total4 = frm.total4.value = getNum(frm.no7.value) + getNum(frm.no8.value);
var subTotal1 = frm.subTotal1.value = total1+total2+total3+total4;
var subTotal2 = frm.subTotal2.value = subTotal1/16;
frm.total.value = subTotal2 * 10;
function getNum(input){
var num = parseFloat(input);
return 0;
return num;
<form method="post" action="" name="myForm">
<input type="text" name="no1">+<input type="text" name="no2">=<input type="text" name="total1"><br>
<input type="text" name="no3">+<input type="text" name="no4">=<input type="text" name="total2"><br>
<input type="text" name="no5">+<input type="text" name="no6">=<input type="text" name="total3"><br>
<input type="text" name="no7">+<input type="text" name="no8">=<input type="text" name="total4"><br>
subtotal1<input type="text" name="subTotal1"><br>
subtotal2<input type="text" name="subTotal2"><br>
total:<input type="text" name="total">
<input type="button" name="totalsButton" value="Calculate Totals" onclick="calcTotals(this.form)">

08-15-2007, 01:47 PM
That is just perfect - both ideas work and so logical too! Thanks so much.

My total now ends up as a figure often with a decimal remainder which I need to get rid of (and the decimal point).

I can truncate the figure to three items with:

frm.total.value = (subTotal/16 * 10).toString().substr(0,3);

...but if the number is less than 99 it includes the decimal point.

How do I convert, say, 145.564 to 145 only and make it work similarly for all numbers?

08-15-2007, 01:58 PM
WAIT! Sorry I have figured it out...

frm.total.value = Math.round(subTotal/16 * 10);

08-15-2007, 02:01 PM
Nice to see you updated your post Phil!;)
Glad you got it working tpeck.

Philip M
08-15-2007, 03:47 PM
How do I convert, say, 145.564 to 145 only and make it work similarly for all numbers?
WAIT! Sorry I have figured it out...

frm.total.value = Math.round(subTotal/16 * 10);

Math.round will round up 145.564 to 146. If you want to round down use Math.floor


frm.total.value = (subTotal/16 *10).toFixed(0);

08-17-2007, 06:24 AM
I am trying to take this one step further by having the number boxes automatically entered from values existing in input boxes on an iFrame on the same page. (People are complaining about entering the numbers when they already exist on the page.)

I've tried lots of things like below, but they dont work - yet:

function calcTotals(frm){
frm.no1.value = document.iframe['I2'].getElementsById('a1ap.value');

The iFrame is called 'I2' and the input box containing the value for the first number box ('no.1') is called 'a1ap'.

I've made a demo at http://aapress.com.au/demo/iframes/p1.html

Where am I going wrong?

If I can get the values to show onload in the number boxes as well as in the iFrame, I think also calculating the totals onload - as shown in this post -will display the FINAL TOTAL automatically.

08-17-2007, 10:21 AM
You've made a couple of mistakes there;
Frames and iframes are referenced through the document.frames collection (there is no "iframe" collection).
There is no method getElementsById, it's getElementById (typeo perhaps?).
Once you've referneced the frame/iframe you have actually got a reference similar to window, so you have to make a reference to the document within the frame (if you want to use something like getElementById).
You can only put the id of an element in the arguement of getElementById, you need to move the '.value' bit outside.

This all means you need something like this (in p1.html):

function load(){
if(document.frames['I3'] && document.frames['I2']){
document.frames['I3'].document.getElementById('no1').value = document.frames['I2'].document.getElementById('a1ap').value;

then your body should be <body onload="load()">, but I suspect you know this bit!

If you want to put the javascript in a different file it'll need modifying, let me know if this is the case and you need any help.
Hope that helps.