How to treat input field value as a number?

Question

I have this very basic calculator:

<html>
    <body>
        <form name="form">
            <input type="text" name="num1" />
            <input type="text" name="num2" />
            <input type="text" name="res" />
            <input type="button" value="+" onclick="form.res.value = form.num1.value + form.num2.value" />
        </form>
    </body>
</html>

But it treats form.num1.value and form.num2.value as string and because of it the result is the concatenation of these values instead of addition.

How to treat them as numbers?

score 5 · Accepted Answer · answered Dec 06 '13 at 12:59

5

Wrap each value in a parseInt(value, 10) or parseFloat(value).

answered Dec 06 '13 at 12:59

Daniel A. White

181,601
45
354
430

Thanks. Is the default base `10`? – Billie Dec 06 '13 at 13:02
@user1798362 Yes, the default is base 10, however older browsers will user base 8 if the string begins with `"0"`. – bfavaretto Dec 06 '13 at 13:11
@bfavaretto when did they make that breaking change? – Daniel A. White Dec 06 '13 at 13:18

score 2 · Answer 2 · edited May 23 '17 at 12:06

2

Shortest way is the unary plus operator, which converts to Number:

+form.num1.value + +form.num2.value

Note: it will return NaN for mixed inputs like "10 potatoes". To avoid that, you can use parseInt or parseFloat.

edited May 23 '17 at 12:06

Community

1
1

answered Dec 06 '13 at 13:00

bfavaretto

70,503
15
107
148

score 1 · Answer 3 · answered Dec 06 '13 at 12:59

1

Try to convert them to number like this:

onclick="Numberform.res.value = Number(form.num1.value) + Number(form.num2.value)"

answered Dec 06 '13 at 12:59

Shryme

1,552
1
14
22

score 1 · Answer 4 · answered Dec 06 '13 at 13:00

1

Convert them to numbers with the + operator or parseFloat.

answered Dec 06 '13 at 13:00

Poetro

574
3
9

How to treat input field value as a number?

4 Answers4