CODEWITHSUNDEEP
javascript
RonTheOld
RonTheOld

Reputation: 777

Updating total price in java script

Hi guys i have a simple questions , I'm not the greatest in JavaScript but i was wondering how i can update a total number. I have button were i can add items to cart and that updates fine, so i used the same method to try and update the total price but it only works once and then it wont add any more.

So When i first add the item the cart updates +1 and the price goes to 565

Second time i update the cart goes to +2 which is perfect but the price stays at 565 when it should go to 1130.

Any help on this matter would be great

HTML:

<a class="shopping-cart" href="#"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">0</span></a>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit">

Javascript: 

var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
       $(".add-to-cart").click(function(){
           currentItems++;
           cartPrice + cartPrice;
           $(".cart-badge").text(currentItems);
           $(".cartPrice").text(cartPrice);
       });
});

So you can see the quantity updates perfectly but the total price only works once

Thanks again

Edit:

I just tried cartPrice += cartPrice; but it doubled it every time

Upvotes: 1

Views: 341

Answers (3)

Mogli
Mogli

Reputation: 1

Actually when press .add-to-cart it will called and do the increment in cartPrice but after second time it will reinitialize the same things that's why it will not increment second time.

var currentItems = 0;

var cartPrice = 565.00;

var i=0;

$(document).ready(function(){

   $(".add-to-cart").click(function(){
   
       currentItems++;
       if(i == 1)
       {
       var Price = $(".cartPrice").text();
       cartPrice=Number(Price) + 565 ;
       $(".cartPrice").text(cartPrice);
       $(".cart-badge").text(currentItems);           
       }
       else
       {
        cartPrice + cartPrice;
        $(".cart-badge").text(currentItems);
        $(".cartPrice").text(cartPrice);
        i=1;
       }
       
   }); });

on first time take your default value and then get your value from

$(".cartPrice").text();

it's worked.

Upvotes: 0

musefan
musefan

Reputation: 48415

The obvious issue with your code is the line: 

cartPrice + cartPrice;

This doesn't do anything because you are not assigning the result. You would have to do either of the following instead:

cartPrice += cartPrice;
cartPrice = cartPrice + cartPrice;

However, that will cause you issues as you will end up doubling the price each time.

The solution is that you should not change cartPrice at all, otherwise you have no way to know the cost of each item for subsequent calculations.

Instead create a local variable and calculate it based on number of items * item cost. Something like this:

var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
   $(".add-to-cart").click(function(){
       currentItems++;
       var totalPrice = currentItems * cartPrice;
       $(".cart-badge").text(currentItems);
       $(".cartPrice").text(totalPrice);
   });
});

Upvotes: 2

Suresh Atta
Suresh Atta

Reputation: 121998

Primitives are immutable. You have to keep overriding with new values.

cartPrice + cartPrice;

That is wrong in 2 ways. It wont update as you are not reassigning and then it keeps double the cart price.

It should be 

cartPrice = currentItems  * cartPrice;

Upvotes: 0

Related Questions