How to add two values in javascript

Question

This is a simple dropdown with values. I'm trying to pull the values as currency then add.

The values aren't being added (1+1=2 or 1+2=3) but instead are concatenating (1+1=11 or 1+2=12). Where am I going wrong here?:

<script>
    function displayResult()
    {
        var strm=document.getElementById("matt").options[document.getElementById("matt").selectedIndex];
        var t=strm.text.search("\\\$");
        var strb=document.getElementById("box").options[document.getElementById("box").selectedIndex];
        var b=strb.text.search("\\\$");
        var x=strm.text.substr(t+1);
        var y=strb.text.substr(b+1);
        var math= x + y;

        alert(strm.text.substr(t+1));
        alert(strb.text.substr(b+1));
        alert(math);
    }
</script>

<form>
    Select #1:
    <select id="matt">
        <option>$1.00</option>
        <option>$2.00</option>
    </select>

    <br />
    Select #2:
    <select id="box">
        <option>$3.00</option>
        <option>$4.00</option>
    </select>

</form>

<button type="button" onclick="displayResult()">Display index</button>

math is probably not a good variable name. but then again, neither are strm, t, strb, b, x, or y... are you a minifier? — jbabey
– jbabey, Commented Sep 21, 2012 at 17:59

j08691 · Accepted Answer · 2012-09-21 17:28:46Z

7

Use parseInt() to cast your strings as integers.

var math= parseInt(x,10) + parseInt(y,10);

See https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt

answered Sep 21, 2012 at 17:28

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tadeck Over a year ago

You can also use ~~x and ~~y instead of parseInt(x,10) and parseInt(y,10). Although ~~ is not as clear as parseInt() for most.

laurent · Accepted Answer · 2012-09-21 17:29:48Z

3

To make sure your values are added as numbers, cast them to Number first:

Number('2') + Number('2') = 4
'2' + '2' = '22'

answered Sep 21, 2012 at 17:29

laurent

91.2k83 gold badges310 silver badges445 bronze badges

2 Comments

pimvdb Over a year ago

Alternatively, one can use +x to convert to a number.

laurent Over a year ago

Explicitly casting it to Number makes the intention clearer, especially if he's a newbie

Sushanth -- · Accepted Answer · 2012-09-21 17:29:33Z

1

Try using parseFloat() or parseInt().. Otherwise it won't recognize it as a number.. It will append as a normal string..

var math= parseFloat(x) + parseFloat(y);

alert(math)

Check FIDDLE

answered Sep 21, 2012 at 17:29

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Seth Flowers · Accepted Answer · 2012-09-21 17:29:02Z

0

The values are being interpreted as strings, you need to convert them to ints with parseInt prior to adding them.

answered Sep 21, 2012 at 17:29

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Comments

David Thomas · Accepted Answer · 2012-09-21 17:29:13Z

0

The substring() function returns the substring of a given string, which is, of course, a string and not an object upon which math can be performed. If you parse those strings into a number, using parseInt(), then it will work:

var x= parseInt(strm.text.substr(t+1),10);
var y= parseInt(strb.text.substr(b+1),10);

Also, you don't need to keep redeclaring var, you could instead comma-separated variable declarations:

var x = parseInt(strm.text.substr(t+1),10),
    y = parseInt(strb.text.substr(b+1),10);

answered Sep 21, 2012 at 17:29

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

user1261388 Over a year ago

substr() was used because my real dropdown also has text populated from a database. <option>Product One $1.00</option> Your suggestion does make sence. Is there a better way then my example?

user3619165 · Accepted Answer · 2014-09-01 01:15:45Z

0

I discovered something interesting today. I was doing the calculator project on theodinproject. I have addition, subtraction, multiplication, and division functions. Subtraction, multiplication, and division works fine without needing to explicitly tell javascript to treat the parameter as a Number.

answered Sep 1, 2014 at 1:15

user3619165

4181 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to add two values in javascript

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related