Use number from HTML text box in JavaScript equation

Question

So I have some HTML code:

<input type="number" id="height">

I want to take whatever is entered in this box and use it as an int/float etc. Lets say I enter "2". Heres the JavaScript code:

var test;
var a;
test = document.getElementById('height').value;
a = 2 + test;

When I print a, I get 22. This makes sense, but I want 4. In other words, I want test to be treated as an int/float (whatever is entered in the text box). Is there an HTML input type that will do this for me, or do I have to change it another way (like JavaScript commands).

Eder · Accepted Answer · 2016-01-29 22:22:13Z

Use the plus sign (+) a.k.a the unary plus operator as the first token for the variable assignment (rvalue), test = +document.getElementById('height').value

From developer.mozilla.org:

The unary plus operator precedes its operand and evaluates to its operand but attempts to converts it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values true, false, and null. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to NaN.

Working Example

var test = +document.getElementById("height").value;
var a;

a = 2 + test;
alert(a);

<input type="number" id="height" value="5">

Luke · Accepted Answer · 2016-01-29 22:04:35Z

1

This is because test is a string, not a number. Use Number() to convert it to a number:

a = 2 + Number(test);

For your information, JavaScript is not Java - JavaScript is more for browsers, while Java is generally applied to more general situations - the syntax for each is vaguely similar, but still different. You are using JavaScript.

edited Jan 29, 2016 at 22:04

answered Jan 29, 2016 at 21:46

Luke

2,1885 gold badges26 silver badges51 bronze badges

Collectives™ on Stack Overflow

Use number from HTML text box in JavaScript equation

2 Answers 2

Working Example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Working Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related