jquery - Sum Javascript variables (strings, actually) - Stack Overflow

admin管理员组

文章数量:1204590

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.

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.

• javascript
• jquery

Share Improve this question Follow edited Jul 28, 2015 at 9:12 Programmeur asked Apr 7, 2014 at 22:33 ProgrammeurProgrammeur 1,53144 gold badges2222 silver badges3333 bronze badges 4

• 2 You are concatenating Strings. – Mr. Polywhirl Commented Apr 7, 2014 at 22:35
• Your variables are strings. You need to convert them to ints. var val_1 = parseInt($('.a').html(), 10); In JavaScript, + is both addition and string concatenation ("addition"). – gen_Eric Commented Apr 7, 2014 at 22:35
• 1 Also, this is not a matter of jQuery, but a matter of JavaScript in general. – Mr. Polywhirl Commented Apr 7, 2014 at 22:36
• Will you only have one instance of each of the elements? – David Thomas Commented Apr 7, 2014 at 22:39

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 12

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)

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);

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())

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})

Use:

var total = parseInt(variable1+variable2);

This is a simple way and I use it to solve the NaN problem in jQuery.

本文标签： jquerySum Javascript variables (stringsactually)Stack Overflow