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>`

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>`

• javascript
• jquery

Share Improve this question Follow edited Apr 2, 2015 at 6:29 Nishit Maheta 6,04133 gold badges1919 silver badges3232 bronze badges asked Apr 1, 2015 at 17:31 user3282911user3282911 1

• follow this jsfiddle/6tp90ur6/19 – Sahil Sharma Commented Apr 1, 2015 at 17:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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./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>

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

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+'$');
       } 
     });
   } 

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