Given: I have elements with values of integers floats (thank you, Pointy) up to two decimal places (such as: 1.50 and 2.25).

Goal: Collect the values of several elements and add them together. (such as: 1.50 + 2.25 = 3.75 )

Code:

$(".quantity").keyup(function(){      
  var sum = 0.00;
  var subTotals = document.getElementsByClassName("sub-total")

  $.each(subTotals, function(){
    sum += $(this).val() << 0
  });
  $("#products_revenue_ine").val(sum)
});

Issue: I'm used to Ruby, so I presumed that iterating over an array of [1.5, 2.25] you could add the elements together with +=, to get 3.75, but my return value was 01.502.25, appearing to (1) add a zero to the left and (2) treat the values as a string. When I added the shift operator <<, it removed the left zero and treated the values like integers again, but it rounded the total, so my return value is 3.

What I've tried: I've tried using parseFloat($(this).val()).toFixed(2) within the block to make sure each value is treated as an integer but it doesn't appear to have any effect on the result.

Tech: jQuery version: 1.7.1.

Thank you for your time Let me know if you require any additional context.

Given: I have elements with values of integers floats (thank you, Pointy) up to two decimal places (such as: 1.50 and 2.25).

Goal: Collect the values of several elements and add them together. (such as: 1.50 + 2.25 = 3.75 )

Code:

$(".quantity").keyup(function(){      
  var sum = 0.00;
  var subTotals = document.getElementsByClassName("sub-total")

  $.each(subTotals, function(){
    sum += $(this).val() << 0
  });
  $("#products_revenue_ine").val(sum)
});

Issue: I'm used to Ruby, so I presumed that iterating over an array of [1.5, 2.25] you could add the elements together with +=, to get 3.75, but my return value was 01.502.25, appearing to (1) add a zero to the left and (2) treat the values as a string. When I added the shift operator <<, it removed the left zero and treated the values like integers again, but it rounded the total, so my return value is 3.

What I've tried: I've tried using parseFloat($(this).val()).toFixed(2) within the block to make sure each value is treated as an integer but it doesn't appear to have any effect on the result.

Tech: jQuery version: 1.7.1.

Thank you for your time Let me know if you require any additional context.

• javascript
• jquery-1.7

Share Improve this question Follow edited Aug 13, 2014 at 14:47 Alaric asked Aug 13, 2014 at 14:34 AlaricAlaric 22911 silver badge1212 bronze badges 3

• 6 1.50 and 2.25 are not integers. – Pointy Commented Aug 13, 2014 at 14:35
• Also note that as you sum your non-integer values, it's quite possible that you'll see floating-point issues. – Pointy Commented Aug 13, 2014 at 14:37
• 1 Tip: Don't use jQuery for math – Bergi Commented Aug 13, 2014 at 14:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This is happening because jQuery's val() method returns the value property of the matched element which is a string type. This means you're falling into the string concatenation trap ("1" + "1" = "11"). You can convert your value into a number using a Unary plus (+):

sum += +$(this).val();

Also worth noting that value is a native property of this, so you can drop the jQuery wrapper and method here altogether:

sum += +this.value;

The jQuery method .val() will return a string-like object, so to convert it to a float to make your maths work OK you can use parseFloat:

sum += parseFloat($(this).val())

MDN docs for parseFloat:

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

Example:

subTotals = [1.1, 2.2]
sum = 0

$.each(subTotals, function(idx, num){
    sum += parseFloat(num)
})

console.log(sum) // Will print 3.3

Demo:

http://jsfiddle/sifriday/7q4qe4L3/

The problem is that val() returns a string. Instead of shift, convert the values. The cleanest and simplest way to do this is by subtracting zero from the value.

$(".quantity").keyup(function(){      
  var sum = 0.00;
  var subTotals = document.getElementsByClassName("sub-total")

  $.each(subTotals, function(){
    sum += $(this).val()-0
  });
  $("#products_revenue_ine").val(sum)
});

This of course assumes that the values will always be numeric.