A little help please!

JavaScript
1

I am trying to add my subtotals, taxes and total have tried a few different ways not sure what I am missing

<td colspan=“5”><table align=“center”>
<tbody>
<tr><td>Sub-Total</td><td><input type=“text” id=“subtotal” size=“6” value=“” name=“SubTotal”
onChange=“UpdateSubTotal” readonly=“readonly” /></td></tr>
<tr><td>PST(%)</td><td><input type=“text” id=“pst” size=“6” value=“7.0” name=“pst”
onfocus=“document.form1.pst.blur()” readonly=“readonly”/></td></tr>
<tr><td>GST (%)</td><td><input type=“text” id="gst"size=“6” value ="5.0"name=“gst”
onfocus=“document.form1.gst.blur()” readonly=“readonly”/></td></tr>
<tr><td>Total</td><td><input type=“text” id=“total” size=“6” name=“ttl”
onfocus=“document.form1.ttl.blur()” readonly=“readonly”/></td></tr>

function UpdateSubTotal(st1,st2,st3,st4,st5,st6){

	var a = document.getElementById("st1").value;
	var b = document.getElementById("st2").value;
	var c = document.getElementById("st3").value;
	var d = document.getElementById("st4").value;
	var e = document.getElementById("st5").value;
	var f = document.getElementById("st6").value;
	document.getElementById(subtotal).value = (st1 + st2 + st3 + st4 + st5 + st6);
	var g = document.getElementById("subtotal").value;
	var h = document.getElementById("gst").value;
	var i = document.getElementById("pst").value;
	var j = document.getElementById("total").value;
	
	document.getElementById("subtotal").value=parseFloat(a) +parseFloat(b)+parseFloat(c)+parseFloat(d)+parseFloat(e)+parseFloat(f)

	document.getElementById("gst").value=parseFloat(g) * parseFloat(h)
	document.getElementById("pst").value=parseFloat(g) *parseFloat(i)
	document.getElementById("total").value=parstFlost(g) +parseFloat(h)+parseFloat(i)
	}

i think in my quest to make it work I have messed something up and now it doesn’t work
Any advice?

2

There’s a typo in the last line:


pars[COLOR="Red"]t[/COLOR]Flo[COLOR="Red"]s[/COLOR]t(g)

should be parseFloat

And


document.getElementById(subtotal)

doesn’t work, subtotal needs to be quoted, like so


document.getElementById([COLOR="Red"]"[/COLOR]subtotal[COLOR="Red"]"[/COLOR])

BTW, You can shorten the code by doing it like this


var subtotal = 0;
for (var i = 1; i <= 6; i++) {
  subtotal += parseFloat(document.getElementById("st" + i).value);
}
document.getElementById("subtotal").value = subtotal;
var g = parseFloat(document.getElementById("subtotal").value);
var h = parseFloat(document.getElementById("gst").value);
var i = parseFloat(document.getElementById("pst").value);
var j = parseFloat(document.getElementById("total").value);

document.getElementById("gst").value= g * h;
document.getElementById("pst").value= g * i;
document.getElementById("total").value = g + h + i
3

thanks, so much for your help!

I made the changes you suggested but still not working this is making me crazy what
am I missing?

4

What do you expect it to and what does it do, i.e., what needs to be changed?

5

<td colspan=“5”<input type=“button” onClick=“TotalOrder” value=“total order”/></td>
</tr>

my total button should add all the quantity st then the taxes added on then create the total when clicked!

6

yes I got that, but does it currently produce any values at all, or just incorrect ones?

7

doesn’t produce anything!~

8

i managed to get it to work except when I
hit the total button my
subtotal, pst, gst and total show NaN

9

NaN stands for “Not a Number”

parseFloat returns NaN when the input does not start with a number. Are you prepending currency signs? If so, don’t do that :slight_smile:
If not, please give an example of what you fill in.

10

this is the script i have:

function TotalOrder()
	{
	var subtotal = 0;
	for (var i = 1; i &lt;= 6; i++) {
	subtotal += parseFloat(document.getElementById("st" + i).value);
		}
	document.getElementById("subtotal").value = subtotal;
	var g = parseFloat(document.getElementById("subtotal").value);
	var h = parseFloat(document.getElementById("gst").value);
	var i = parseFloat(document.getElementById("pst").value);
	var j = parseFloat(document.getElementById("total").value);
	
	document.getElementById("gst").value = g * h;
	document.getElementById("pst").value = g * i;
	document.getElementById("total").value = g + h + i
	
}

this is what I have in my body!
<td colspan=“5”><table align=“center”>
<tbody>
<tr><td>Sub-Total</td><td><input type=“text” id=“subtotal” size=“6” value=“” name=“SubTotal”
onChange=“TotalOrder()” readonly=“readonly” /></td></tr>
<tr><td>PST(%)</td><td><input type=“text” id=“pst” size=“6” value=“7.0” name=“pst”
onfocus=“document.form1.pst.blur()” readonly=“readonly”/></td></tr>
<tr><td>GST (%)</td><td><input type=“text” id="gst"size=“6” value ="5.0"name=“gst”
onfocus=“document.form1.gst.blur()” readonly=“readonly”/></td></tr>
<tr><td>Total</td><td><input type=“text” id=“total” size=“6” name=“ttl”
OnChange=“TotalOrder()” readonly=“readonly”/></td></tr>

<tr>
<td colspan=“5”<input type=“button” onClick=“TotalOrder()” value=“total order”/></td>
</tr>

11

And the values you enter into st1 through st6 are also numbers (decimals and a dot only, no thousand separators allowed) ?

12

function calcSubTotal(unitPriceId, qtyId, subTotalFieldId) {
var unitPrice = parseFloat(document.getElementById(unitPriceId).value);
var qty = parseInt(document.getElementById(qtyId).value);

		document.getElementById(subTotalFieldId).value = (unitPrice * qty);
		
//confirms that both unit price and quantity are numbers before calculating
    if (!isNaN(unitPrice) && !isNaN(qty)) {		
	}
	    
//alerts and debugs calculations
   alert("unitPrice: " + unitPrice + ", qty: " + qty + ", subTotal: " + (unitPrice * qty));
}

this is what I have

13

yes that is correct

14

As far as I can see your code can only go wrong if you enter invalid data (not numbers) in the form.

Is there some place I can see the code online so I can test it btw?

15

Would it work to zip it and attach it

16

Yes, it would :slight_smile:

17

here is the file, thanks so much for your help!

18

Alright I’ll have a look tomorrow.
Reeealy need some sleep now :slight_smile:

19

Awesome! I can not thank you enough!

20

First of all, your HTML contains some errors, make sure you use the Markup Validation Service to make sure your HTML has no errors and/or warnings.

As far the javascript goes:

document.form1.gst is considered bad (old-school) style, you should use


document.getElementById("gst")



document.getElementById("gst").value = g * h;
document.getElementById("pst").value = g * i;

Why are you setting this fields? They are fixed percentages right, so why change them? If so, remove these two lines from your code.

PST and GST are percentages, so you should devide them by 100 to work with them


var h = parseFloat(document.getElementById("gst").value) / 100;
var i = parseFloat(document.getElementById("pst").value) / 100;

And the calculation of the total should then be (IMHO)


document.getElementById("total").value = g + (h * g) + (i * g)

That is to say:

total = subtotal + (gst * subtotal) + (pst * subtotal)

Since we just divided gst and pst by 100, this works.

Or, even better


document.getElementById("total").value = (g + (h * g) + (i * g)).toFixed(2);

To get no more then 2 decimals

As for the NaN’s, you get these if you leave fields open, so the subtotal is just an empty string, and parseFloat() of an empty string is NaN. If you have one or more NaN’s in your calculation the end result will also be NaN.

To solve this, you could do it like this


for (var i = 1; i <= 6; i++) {
	[COLOR="Red"]var price = [/COLOR]parseFloat(document.getElementById("st" + i).value);
	[COLOR="Red"]if (!isNaN(price)) {[/COLOR]
		subtotal += price;
	[COLOR="Red"]}[/COLOR]
}

If you apply all these changes to your code (and please make sure you understand why the changes are needed!) it should work (at least it does for me).

BTW, I noticed your file is called “assignment”. Please note that these forums are not meant to ask other people to do your homework for you. It’s fine for now (as far as I’m concerned) but don’t make a habit out of it! Homework is there for one reason and for one reason only: to make you learn! :slight_smile: