Adding Javascript variables

Question

So, I'm relatively new to JavaScript and I was wondering how I would add the values from two inputs and echo out the result. Here's what I have so far:

function math (form) {
    var input1 = form.input1.value;
    var input2 = form.input2.value;
    var input3 = input1 + input2;
    document.write (input3);
}

<form action="" method="GET">
   <input type="text" name="input1">
   <input type="text" name="input2">
   <input type="button" name="button" onClick="math(this.form)">
</form>

I expected that when I entered a number into each input it would spit out the sum of the two numbers. Instead it just prints both numbers individually.

How can I get it to print the sum of the two numbers?

pimvdb · Accepted Answer · 2011-12-15 22:06:33Z

17

.value gives the characters in the textbox, i.e. a string. You somehow need to tell JavaScript that it's a number. Otherwise you're concatenating the strings (str + str is concatenating; num + num is adding arithmetically).

String to number conversion is most easily done with + like this:

+input1

So in your case:

document.write(+input1 + +input2);

However, document.write is not the way to display things. You probably want alert, or put it in another textbox or something like that. document.write will clear the screen.

answered Dec 15, 2011 at 22:06

pimvdb

155k80 gold badges313 silver badges357 bronze badges

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

1 Comment

codedude Over a year ago

thanks for the tip. I was just using document.write temporarily until I got some other stuff sorted out.

Andrew · Accepted Answer · 2011-12-15 22:20:16Z

12

They are strings when you read them in, they must be parsed first,

var input3 = parseInt(input1, 10) + parseInt(input2, 10);

[Edit] Just to elaborate, the difference between parseInt and the Unary Plus is in the error handling,

var a = parseInt('123o45', 10); //123
var b = +'123o45' // NaN

edited Dec 15, 2011 at 22:20

answered Dec 15, 2011 at 22:06

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

1 Comment

Jonas Over a year ago

+1 for pointing out the difference between parseInt and Unary Plus.

Damen TheSifter · Accepted Answer · 2013-08-23 02:34:52Z

3

parseInt is your firend here..

function math (form) {
  var input1 = form.input1.value;
  var input2 = form.input2.value;
  var input3 = parseInt(input1, 10) + parseInt(input2, 10);
  document.write (input3);
}

edited Aug 23, 2013 at 2:34

answered Dec 15, 2011 at 22:07

Damen TheSifter

9121 gold badge6 silver badges17 bronze badges

1 Comment

Paul Over a year ago

ParseInt without specifying the radix is generally a bad idea. Should be parseInt(input1, 10) to make sure it parses all strings as decimal.

Christofer Eliasson · Accepted Answer · 2011-12-15 22:06:33Z

1

You would have to parse them to integers first using parseInt.

answered Dec 15, 2011 at 22:06

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Comments

Zack · Accepted Answer · 2018-08-28 09:01:07Z

0

Mine worked well with parsing them to Float as I am having decimal digits. Instead of parseInt(), I used parseFloat().

I hope it'll help somebody in future.

answered Aug 28, 2018 at 9:01

Zack

4927 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding Javascript variables

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related