CODEWITHSUNDEEP
javascriptjquery
user3282911
user3282911

Reputation:

JavaScript Calculate total price of items

Please help me to type the total price of selected items. Here is JSFiddle 

 <section id="items">
   <div class="item">Monitor <span class="price">100$</span></div>
   <div class="item">Mouse <span class="price">20$</span></div>
   <div class="item">Keyboard <span class="price">60$</span></div>
 </section>
 <section id="basket">
   <p>Total price:<span class="total_price"></span></p>
 </section>`

Upvotes: 1

Views: 11044

Answers (4)

Artur Filipiak
Artur Filipiak

Reputation: 9157

I have moved '$' outside of the .total_price span

$("#items, #basket").on('click', ".item", function(){
    $($(this).parent().is('#items')?'#basket':'#items').append(this);   
    $(".total_price").text(getTotal());
});

function getTotal(){
    var t = 0;
    $('.price', "#basket").each(function(){
       t+=parseInt($(this).text());
    });
    return t;
}

JSFiddle

Upvotes: 0

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

var total = 0;

$("#items").on('click', ".item", function() {       
    $(this).appendTo("#basket");
    total += parseInt($(this).children().text(), 10);
    $('.total_price').text(total);
});

$("#basket").on('click', ".item", function() {      
    $(this).appendTo("#items");
    total -= parseInt($(this).children().text(), 10);
    $('.total_price').text(total);
});

JSFiddle

Upvotes: 1

Nishit Maheta
Nishit Maheta

Reputation: 6031

check demo 

   var total = 0;
   $("#items").on('click', ".item", function() {        
        $(this).appendTo("#basket");
        getTotal()
   });
    $("#basket").on('click', ".item", function() {      
      $(this).appendTo("#items");   
      getTotal()
   });


  function getTotal(){
     total = 0;
     $("#basket").find('.price').each(function(i){
        total += parseInt($(this).text().slice(0,-1));
        if(i + 1 === $("#basket").find('.item').length){
         $('.total_price').text(total+'$');
       } 
     });
   }

Upvotes: 0

Vim
Vim

Reputation: 559

This code will work dynamically. Even if you add or remove items, it should work.

var priceList = $('#items').find('.price');

var totalPrice = 0;

$.each(priceList, function(i, price){
  
totalPrice += parseInt($(price).text())
  
  });

$('.total_price').text(totalPrice);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="items">
    <div class="item">Monitor <span class="price">100$</span></div>
    <div class="item">Mouse <span class="price">20$</span></div>
    <div class="item">Keyboard <span class="price">60$</span></div>
</section>
<section id="basket">
    <p>Total price:<span class="total_price"></span></p>
</section>

Upvotes: 1

Related Questions