Myujth

I'm confused and I've tried getting the following javascript to render a Total amount calculation but I'm having $NaN and some cell are not displaying the correct values when a dropdown list is used to pick a mailing option.

Here's the Javascript and the JSFIDDLE that I've been working on:

$(function() 
 function calcTotal() 
 var p = 
 qty: parseInt($(".prod-row .qty").text().trim()),
 costperitem: parseInt($(".prod-row .costperitem").text().trim()),
 tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
 shipcost: parseFloat($(".prod-row .shippingcost").text().trim().slice(1)),
 price: parseFloat($(".prod-row .item-cost").text().trim().slice(1)) 
 ;
 var t = 0.00;
 if (p) 
 t = (p.qty * p.costperitem) + (p.tax) + (p.qty * p.shippingcost);
 
 console.log(p, t);
 return t;
 
 $("#shippingmethod").change(function(e) 
 var shipQty = parseInt($(".prod-row .qty").text());
 var shipCost = parseFloat($(this).val());
 $(".prod-row .item-cost").html("$" + shipCost.toFixed(2));
 $(".prod-row .total").html("$" + (shipQty * shipCost).toFixed(2));
 var total = calcTotal();
 $("#product-totals .total").html("$" + total.toFixed(2));
 );
);

Desired outcome

To have all the items in only 1 row and where total column shows the following math result from the calculation: (Qty. + ItemCost + Tax) + (Qty.*S&H).

Thanks for any help!

The issue resides in the index call. In the following function:

function calcTotal() 
 var p = 
 qty: parseInt($(".prod-row .qty").text().trim()),
 costperitem: parseInt($(".prod-row .costperitem").text().trim()),
 tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
 shipcost: parseFloat($(".prod-row .shippingcost").text().trim().slice(1)),
 price: parseFloat($(".prod-row .item-cost").text().trim().slice(1)) 
 ;
 var t = 0.00;
 if (p) 
 t = (p.qty * p.costperitem) + (p.tax) + (p.qty * p.shippingcost);
 
 console.log(p, t);
 return t;

You reference p.shippingcost which does not exist and returns undefined.

Also, you want to parseFloat() on your costperitem section. parseInt() will round to the nearest Integer.

Also you need to slice() off any preceding $ signs.

Correct like so:

function calcTotal() 
 var p = 
 qty: parseInt($(".prod-row .qty").text().trim()),
 costperitem: parseFloat($(".prod-row .costperitem").text().trim().slice(1)),
 tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
 shipcost: parseFloat($(".prod-row .shippingcost").text().trim().slice(1)),
 price: parseFloat($(".prod-row .item-cost").text().trim().slice(1)) 
 ;
 var t = 0.00;
 if (p) 
 t = (p.qty * p.costperitem) + (p.tax) + (p.qty * p.shipcost);
 
 console.log(p, t);
 return t;

Good Luck!

Update

I would suggest the following code that is fixed to perform all the various steps needed with the correct Class Names in place.

$(function() 
 function toCur(fl) 
 return "$" + parseFloat(fl).toFixed(2);
 

 function parseCurToFloat(txt) 
 return parseFloat(txt.trim().slice(1));
 

 function setNewShipCost($row, cost) 
 $row.find(".shipping-cost").html(toCur(cost));
 return toCur(cost);
 

 function calcRowTotal($row) 
 var q = parseInt($row.find(".qty").text());
 var c = parseCurToFloat($row.find(".item-cost").text());
 var t = parseCurToFloat($row.find(".tax").text());
 var sh = parseCurToFloat($row.find(".shipping-cost").text());
 var ttl = (q * c) + (q * sh) + t;
 $row.find(".total").html(toCur(ttl));
 return ttl;
 

 function calcNewTotal() 
 var t = 0.00;
 $(".prod-row").each(function(ind, el) 
 t = t + parseCurToFloat($(el).find(".total").text());
 );
 $("#product-totals .total").html(toCur(t));
 return t;
 

 $("#shippingmethod").change(function(e) 
 var shipCost = $(this).val();
 console.log("Set Ship", setNewShipCost($(".prod-row"), shipCost));
 console.log("Calc Row Total", calcRowTotal($(".prod-row")));
 console.log("Calc total", calcNewTotal());
 );
);

Working Example: http://jsfiddle.net/Twisty/ag1u4vjc/