CODEWITHSUNDEEP
javascriptjquery
Adam R
Adam R

Reputation: 77

Jquery calculation works but adds incorrect value before correct value

I've been working on this calculator and it's working in the sense it's correctly calculating the price of the field and displaying it. The problem though is that it appears to append the correct answer to another value (presumably taken from the data-price as they correlate).

Here's the code I have for it:

var updateTotal = function() {
 
    var sumtotal;
       var sum = 0;
    //Add each product price to total
    $(".extraproduct").each(function() {
        var extra_price = $(this).data('price');
        var quantity = $('.extraQuantity', this).val();
   
        //Total for one product
        var subtotal = extra_price*quantity;     
         //Round to 2 decimal places.
        subtotal = subtotal.toFixed(2);      
        //Display subtotal in HTML element
        $('.productTotal', this).html(subtotal);
    });
    // total
       $('.productTotal').each(function() {
        sum += Number($(this).html());
    }); 
    
    $('#sum').html(sum.toFixed(2));
};
//Update total when quantity changes
$(".extraQuantity").bind("keyup change", function() {
    updateTotal();
});
//Update totals when page first loads
updateTotal();
// set this from local
    $('span.productTotal').each(function() {
        $(this).before("£")
    }); 
// unit price
   $('.extraproduct span').each(function() {
       var $price = $(this).parents("div").data('price');
      $(this).before($price);
    }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="quote-label">Product 1</span>
<div class="input-wrap currency extraproduct" data-price="450.00">
<input type="number" class="extraQuantity" value="0"  min="1" max="20" />
<span class="productTotal"></span>
</div>
                
 <span class="quote-label">Product 2</span>
<div class="input-wrap currency extraproduct" data-price="10.00">
<input type="number" class="extraQuantity" value="0"  min="1" max="20" />
<span class="productTotal"></span>
</div>


            
 <span class="quote-label">Additional Product</span>
<div class="input-wrap checkbox-wrap extraproduct" data-price="5.00"><input type="checkbox" class="extraQuantity" value="0" />
<span class="productTotal"></span>
</div>

<div id="total">Total: £<span id="sum">0.00</span> </div>

https://jsfiddle.net/DigitalAdam/5fLb0vnp/26/

I thought it could be to do with the subtotal.toFixed part but had no luck when adjusting or removing that. Any help is appreciated. Regards

Upvotes: 0

Views: 87

Answers (1)

404_Name_Not_Found
404_Name_Not_Found

Reputation: 437

Very Simple solution: you are just using the .productTotal spans to calculate something. You could just set the display to none. It can still be used for calculations but it will now show:

.productTotal {
  display: none;
}

Upvotes: 1

Related Questions