jQuery - Addition within .each() sum loop causing issue

Question

I'm trying to write an equation within a sum loop and everything works fine by the use of an addition sign +, which I'm assuming is confusing the incrementing of the sum loop. The value should be 56 for the equation but actual output is a string of 095959595.

JFIDDLE

The code looks like this:

$(function () {
    var feature = $('.product');
    var supplier = $('#supplier').val();

    var costCurve = $('#productCostCurve').val();
    var baseCost = $('#baseComponentCost').val();

    var unitCost = 0;

    $.each(feature, function () {
        unitCost += (costCurve * parseFloat($(this).val()) * baseCost * supplier) + baseCost;
    });

    $('#product-cost').html(unitCost);
});

Arun P Johny · Accepted Answer · 2014-10-16 02:53:40Z

4

The problem is baseCost, it is a string value so a string concatenation is done

$(function() {
  var feature = $('.product');
  var supplier = $('#supplier').val();

  var costCurve = $('#productCostCurve').val();
    //use a unary plus or parseFloat to convert this to a numeric value
  var baseCost = +$('#baseComponentCost').val();

  var unitCost = 0;

  $.each(feature, function() {
    unitCost += (costCurve * parseFloat($(this).val()) * baseCost * supplier) + baseCost;
  });

  $('#product-cost').html(unitCost);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="productCostCurve" value="0.5" />
<input type="text" id="baseComponentCost" value="5" />
<input type="text" class="product" value="4" />
<input type="text" class="product" value="4" />
<input type="text" class="product" value="4" />
<input type="text" class="product" value="4" />
<input type="text" id="supplier" value="0.9" />
<div id="product-cost"></div>

answered Oct 16, 2014 at 2:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nem035 Over a year ago

Shouldn't the supplier and the costCurve have the same issue?

Arun P Johny Over a year ago

@nem it is used in a multiplication operation which is numeric specific so the conversion will be done automatically... the + operator is used as addition and string concatenation operator

Collectives™ on Stack Overflow

jQuery - Addition within .each() sum loop causing issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related