Sum Javascript variables (strings, actually)

Question

I have three div that contain a number.

<div class="a">10</div> 
<div class="b">20</div>
<div class="c">30</div>

I get the number inside each one with jQuery .html() .

var val_1 = $('.a').html(), 
    val_2 = $('.b').html(),
    val_3 = $('.c').html();

How can I sum them?

This do not work as expected:

var total = val_1 + val_2 + val_3;

Since returned 102030, when I expected 60.

Answer 1

First, since you want only the content of your divs, you'd better use $('.x').text() instead of $('.x').html() .

Now what's happening is that you're additioning strings, ie concatening them: '1' + '2' + '3soleil' === '123soleil' .

You want to parse them into numbers, which is done with

Number(val1) + Number(val2) + Number(val3)

If you know they're integers, you can more safely use Number.parseInt(val, 10) (the second variable of that function, called radix, is the mathematic base of your number. It's most likely a decimal number (10), but could be hexadecimal (16), boolean number (2), etc)

Answer 2

jsFiddle Demo

You could group them, use each to iterate, and total their parseInt numbers

var val = 0;
$('.a, .b, .c').each(function(){
 val += parseInt(this.innerHTML,10);
});
alert(val);

Answer 3

use parseInt because your div content is evaluate as string:

var val_1 = parseInt($('.a').html(),10), 
    val_2 = parseInt($('.b').html(),10),
    val_3 = parseInt($('.c').html(),10);

Answer 4

Use parseInt() on each variable; right now it's treating them as strings and concatenating them.

Answer 5

您需要使用parseInt（）将从.html（）返回的字符串值解析为int。

var val_1 = parseInt($('.a').html())

Answer 6

If you don't want to type (var + var), you could do the following.

Firstly, the issue in your code was that your variables were interpreted as strings, we can force the INT data-type like, so.

val_1 = parseInt($('.a').html()), 
val_2 = parseInt($('.b').html()),
val_3 = parseInt($('.c').html());

Then we aggregate the variables into a tidy array, then perform the .reduce() function, which is a sum function.

var aggregate = array(val_1, val_2, val_3);
aggregate.reduce(function(a,b){return a + b})