JS add operation return char+char, not int+int

Question

$(function() {
    $("input[class$='m_value']").keyup(function() {

        var val1 = $('#v1').val();
        var val2 = $('#v2').val();
        var val3 = $('#v3').val();

        var total = val1+val2+val3;

        $( "#total" ).val( total );
    });
});

if #v1= 1 #v2=5

I will get 15 , not 6

why the code just char+char...? this not int+int.

Input values are always strings, you've to convert them to numbers before doing the math. Automatic type coersion doesn't do it for you, since `+` is used to concatenate strings too. — Teemu, Dec 01 '15 at 16:06
Sky, google "convert string to number javascript" and you'll find many answers :) — Sterling Archer, Dec 01 '15 at 16:07
Use `parseInt()` [link] (http://www.w3schools.com/jsref/jsref_parseint.asp) — om1, Dec 01 '15 at 16:07

score 4 · Accepted Answer · edited May 23 '17 at 11:59

4

Because you're using strings. The return value of val when used on input elements is always a string. (On select elements with multiple, it can be null or an array; if you call it on a jQuery set that has no elements in it at all, it will be undefined).

So first, turn your values into numbers, using the unary +, or parseInt, or parseFloat, or Number.

Example using unary + (changes on first three lines):

var val1 = +$('#v1').val();
var val2 = +$('#v2').val();
var val3 = +$('#v3').val();

var total = val1+val2+val3;

$( "#total" ).val( total ); // Implicit conversion to string here

This answer lists various ways to convert to number and their various idiosyncrasies.

edited May 23 '17 at 11:59

Community

1
1

answered Dec 01 '15 at 16:06

T.J. Crowder

1,031,962
187
1,923
1,875

I got it. Thanks so much Crowder. – Sky Dec 01 '15 at 16:08
1

One other exception regarding jQuery `val()` is that it can return array too – A. Wolff Dec 01 '15 at 16:09
@A.Wolff: I Did Not Know That! Wow. I would have said I knew jQuery pretty darned well by now. Just goes to show, there's always something to learn. Fixed, and **many** thanks. – T.J. Crowder Dec 01 '15 at 16:10
@T.J.Crowder, that makes two. I thought `val()` returns a singular value. And in the case of an element collection from the preceding selector, the first elements value – AmmarCSE Dec 01 '15 at 16:14
@AmmarCSE: It's in the answer above: A `select` element with the `multiple` attribute. You're right that when used as a getter, `val` always only works with the *first* element in the set (like the other getters). But if that element is a `select` with `multiple`... – T.J. Crowder Dec 01 '15 at 16:16
@T.J.Crowder, Ha! I literally just skimmed through that :-) Thanks! – AmmarCSE Dec 01 '15 at 16:16

score 0 · Answer 2 · answered Dec 01 '15 at 16:14

The val() function reads everything as text. If the input to those three elements are always integers you can just convert the values to integers using parseInt.

$(function() {
    $("input[class$='m_value']").keyup(function() {

    var val1 = parseInt($('#v1').val());
    var val2 = parseInt($('#v2').val());
    var val3 = parseInt($('#v3').val());

    var total = val1+val2+val3;

    $( "#total" ).val( total );
    });
});

Here is the JavaScript reference on ParseInt.

JS add operation return char+char, not int+int

2 Answers2