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.
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)
parseInt() don't forget the radix.
.text() over .html(), only answer to prefer Number() over parseInt(). Thumbs up!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);
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);
Use parseInt() on each variable; right now it's treating them as strings and concatenating them.
You need to parse the string value returned from .html() as an int using parseInt().
var val_1 = parseInt($('.a').html())
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})
Use:
var total = parseInt(variable1+variable2);
This is a simple way and I use it to solve the NaN problem in jQuery.
var val_1 = parseInt($('.a').html(), 10);In JavaScript,+is both addition and string concatenation ("addition").