CODEWITHSUNDEEP
jqueryappendcalculator
Maxim Siebert
Maxim Siebert

Reputation: 307

Calculate Subtotal Using Jquery

I'm trying to get the subtotal of items that the user appends to the shopping cart, but can't seem to get it to work.

Basically I have a list of items, on which they have an add to cart button which is linked to a jquery function that appends some html to the shopping cart:

$('#object01').click(function(){
    if ($('#slideShoppingCart').is(":hidden")) {
    $('#slideShoppingCart').slideToggle(500);   
    $('#objectList').append('<div class="shoppingCartObject"><img src="img/leather-backpack-cart.jpg" width="75" height="75"><div class="cartObjectInfo"><h1 class="cartTitle">Gentleman&#39;s Satchel</h1><div class="closeCartObject">x</div><h2 class="cartDescription">Chestnut Leather</h2><h3 class="quantity">QTY. 1</h3><h3 class="cartPrice">£<span class="price">300</span></h3></div></div>')
    } else {
        $('#objectList').append('<div class="shoppingCartObject"><img src="img/leather-backpack-cart.jpg" width="75" height="75"><div class="cartObjectInfo"><h1 class="cartTitle">Gentleman&#39;s Satchel</h1><div class="closeCartObject">x</div><h2 class="cartDescription">Chestnut Leather</h2><h3 class="quantity">QTY. 1</h3><h3        class="cartPrice">£<span class="price">300</span></h3></div></div>')
    }
    });
    $('.closeCartObject').live('click', function() {
    $(this).parent().parent().remove();

    return false;
});

In which I have the price wrapped in a span with a class called price. I then have a span in my shopping cart with an id of total.

I have this function to calculate the price, which doesn't seem to work.

$(document).ready(function getTotal(){
var total = 0;
$('.price').each(function(){
    total += parseFloat(this.innerHTML)
});
$('#total').text(total);
getTotal();
});

Upvotes: 2

Views: 1778

Answers (3)

Lee Taylor
Lee Taylor

Reputation: 7994

Your function:

$(document).ready(function getTotal(){
var total = 0;
$('.price').each(function(){
    total += parseFloat(this.innerHTML)
});
$('#total').text(total);
getTotal();
});

contains a call to getTotal() from getTotal(). You have inadvertent recursion.

EDIT: OK, try this: (it'd be easier if there was a jsfiddle for your code though)

$(document).ready(function ()
{
    var total = 0;
    $('.price').each(function()
    {
        total += parseFloat(this.innerHTML)
    });

    $('#total').text(total);
});

Upvotes: 1

Ashan
Ashan

Reputation: 19748

It seems like your calculation logic works

var total = 0;
$('.price').each(function(){
    total += parseFloat(this.innerHTML)
});

But the problem is that you are calling the "getTotal()" function inside itself.

Try

$(document).ready(function() {

var getTotal = function(){
  var total = 0;
  $('.price').each(function(){
      total += parseFloat(this.innerHTML);
  });
  return total;
}  

$('#total').text(getTotal());

});

Upvotes: 1

Martin Lyne
Martin Lyne

Reputation: 3065

Try putting your JS in <script defer="defer"> tag, this means it gets run last - its possible your function tries to caclulate before the Dom is totoally finished (this may have only been with earlier version of jQuery though)

Alternatively add a setTimeout to call your sub-total function after a few seconds.

You may also want to add some alerts to your function, make sure the fields its trying to target aere targeted correctly.

Defer: How exactly does <script defer="defer"> work?

setTimeout: https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

Upvotes: 0

Related Questions