Calculate all item totals to subtotal Jquery

Question

Note: bunch of people have had similar questions but my code is set up a little differently so those solutions won't work here.

I have a subtotal variable that should add each total(price * quantity) for each item and return the combined total. I'm getting the subtotal is coming back as: 8.99undefinedundefinedundefined. If I add a new item it's now: 8.9911.99undefinedundefined

Here's my code:

// defining Order Items
// ea Item creates a new row with 3 td cells. Includes Item description and Price
var $burger = $("<tr><td class='addedBurger'>Royale w/ Cheese</td><td></td><td>$8.99</td> <td id='burgerCount'></td> </tr>");
var $pizza = $("<tr><td class='addedPizza'>Arugula Pizza</td><td></td><td>$11.99</td> <td id='pizzaCount'></td> </tr>");
var $pork = $("<tr><td class='addedPork'>Smoked Pork Ribs</td><td></td><td>$14.99</td> <td id='porkCount'></td> </tr>");
var $icecream = $("<tr><td class='addedIceCream'>Ice Cream Biscuit</td><td></td><td>$7.99</td> <td id='icecreamCount'></td> </tr>");

// Tbody(Order Items get prepended to here)
var $tbody = $('#placeOrderHere');


// BURGER
var $burgerTotal;
var $burgerCounter = 0;
var $burgerPrice = 8.99;
// Add to Order: Burger Button
$( "#place-order1" ).click(function() {
// adds burger item table row
$burger.prependTo($("#placeOrderHere"));
// counts burgers
$burgerCounter ++;
// updates burger quanities in row td
$('#burgerCount').text($burgerCounter);

$burgerTotal = ($burgerCounter * $burgerPrice).toFixed(2);
$orderSubTotal = ($burgerTotal + $pizzaTotal + $porkTotal + $icecreamTotal);
$('#subtotal').text($orderSubTotal);
});

// Defining Subtotal
var $orderSubTotal;

//$orderSubtotal = $burgerTotal + $pizzaTotal + $porkTotal +   $icecreamTotal;
// console.log($orderSubtotal);

To keep this post shorter. I only included one of the four items - Each items code is the same. Only the names are different... So Pizza has the variables $pizzaTotal, $pizzaCounter, $pizzaPrice etc.,

This part is working I just can't seem to get the subtotaling to work correctly. I had a different problem w/ subtotaling before I put the tofixed on the $itemTotal. It was adding the total but giving me Nan issues if I had more than two items subtotaling...

What the best fix? Thanks in advance!!! :)

People will do less guessing if you include the HTML and JavaScript as a snippet. — vol7ron, Aug 29 '16 at 00:55

MPawlak · Accepted Answer · 2016-08-29T01:44:21.873

1

I believe you're having a "typecasting" issue due to math on uninitialized variables.

Try adding this to the top of your codeblock-

$burgerTotal = 0;
$pizzaTotal = 0;
$porkTotal = 0;
$icecreamTotal = 0;

But you are also getting strings rather than ints somewhere. This also needs to be corrected.

For example

var a = 10; var b; a + b 
//returns NaN

var a = 10; var b; a.toString() + b 
//returns "10undefined"

Edit- I believe I found it. .toFixed() turns your int into a string. Either change the floating point with $orderSubTotal or change

 $burgerTotal = ($burgerCounter * $burgerPrice).toFixed(2);

to

$burgerTotal = parseFloat(($burgerCounter * $burgerPrice).toFixed(2));

edited Aug 29 '16 at 01:44

answered Aug 29 '16 at 00:03

MPawlak

715
5
18

JavaScript doesn't have "types" nor "type-casting" per se. What you may be referring to is the fact that uninitialized variables have the special value `undefined`, and return `NaN` when you try to do arithmetic with them. – rvighne Aug 29 '16 at 00:09
Yes! It was the uninitialized variables! Thank you!!! One thing I noticed is the two fixed or maybe it's the parse int is rounding off my numbers? 8.99 is 8 now? How do I fixed that? – TYPOI Aug 29 '16 at 01:12
I found the answer. Using parseFloat instead. Thank you for the help! :) – TYPOI Aug 29 '16 at 01:18

Calculate all item totals to subtotal Jquery

1 Answers1