HTML input type="number" still returning a string when accessed from javascript

Question

I'm new to javascript , I'm trying learning how functions etc in JS and trying to add 2 numbers

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS ADD</title>
</head>

<body>

  <h1>Funcitons is JS</h1>


  <input type="number" id="num1">
  <input type="number" id="num2">

  <button type="button" onclick="addNumAction()">
    Add
  </button>

  <script>
    function addNum(n1, n2) {
      return parseInt(n1) + parseInt(n2);
    }

    function addNumAction() {
      var n1 = document.getElementById("num1").value;
      var n2 = document.getElementById("num2").value;

      var sum = addNum(n1, n2);
      window.alert("" + sum);

    }
  </script>

</body>

</html>

If I remove the parseInt() the value is treated as a string only , then what is the point of using <input type="number"> ?please explain to me. what field to use for getting input as a number?

https://www.w3.org/TR/html5/forms.html#number-state-(type=number) - see the spec — Arun P Johny, Mar 04 '16 at 09:04
there is nothing you can do. HTML Input element is documented to return the value in String type representing number. See my explanation below. — secretgenes, Mar 04 '16 at 09:30

Arno Chauveau · Accepted Answer · 2016-03-04T09:05:49.910

67

It's normal you get a string.

The purpose of the number type is that mobile browsers use this for showing the right keyboards and some browsers use this for validation purposes. For example the email type will show a keyboard with the @ and '.' on the keyboard and number will show a numeric keyboard.

edited Mar 04 '16 at 09:05

answered Mar 04 '16 at 09:03

Arno Chauveau

990
9
14

Is there any way to get the input as a number that can be used like a javascript number data type , or is receiving as string and converting the standard way to do this? – Sainath S.R Mar 04 '16 at 09:05
8

You will have to use parseInt in this case. – Arno Chauveau Mar 04 '16 at 09:07
If that answered your question, would you mind accepting the answer? – Arno Chauveau Mar 04 '16 at 09:08
@SainathS.R Please check the link in secretgenes's answer. A number can have many different formats and still be a number. It's good news that JavaScript doesn't hide the actual value. – Álvaro González Mar 04 '16 at 16:29
3

The purpose of `` and a few other types is also to provide a useful value in the `valueAsNumber` property. – Sebastian Simon Nov 22 '20 at 02:32

Álvaro González · Answer 2 · 2021-10-20T11:06:48.347

Neither HTML nor HTTP really have the concept of data types (possibly because they aren't programming languages to begin with) and everything is a string. When you use another language to reach that information you may sometimes get some amount of magic as a feature (for instance, PHP will generate arrays from GET/POST fields that have paired square brackets on their names) but that's a feature of such other language.

In this case, .value belongs to the DOM API and such API does have types. But let's see how it's defined. The <input> tag is represented by the HTMLInputElement interface and the value property is of type DOMString:

DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.

In other words, type="number" is a hint to implement client-side validation and appropriate GUI controls but the underlying element will still store strings.

score 17 · Answer 3 · answered Mar 04 '16 at 09:04

17

tl;dr you're doing everything correctly already, just keep using parseInt.

type="number" tells the browser that the user should only be allowed to enter number characters, but deep down, it's still a text field.

answered Mar 04 '16 at 09:04

webb

4,180
1
17
26

1

This should have been the accepted answer because it is exactly what it is. – Chris22 Feb 21 '20 at 22:50

score 17 · Answer 4 · edited Nov 22 '22 at 05:33

17

You can use valueAsNumber (described on that page) to get the actual number value. So your code would then be:

function addNum(n1, n2) {
  return n1 + n2;
}

function addNumAction() {
  var n1 = document.getElementById("num1").valueAsNumber;
  var n2 = document.getElementById("num2").valueAsNumber;

  var sum = addNum(n1, n2);
  window.alert("" + sum);

}

edited Nov 22 '22 at 05:33

Phil

157,677
23
242
245

answered Nov 17 '17 at 16:28

Chris Shepherd

1,436
1
11
17

score 9 · Answer 5 · answered Mar 04 '16 at 09:26

HTML Input elements are documented to return string representing a number. See the documentation here : Documentation of HTML Input
When you set input type="number" then these input field don't accept non numeric input but at the same time it doesn't make the input value type "number". The reason is inputted number contain digits as a subset of the valid characters, but they also contain completely non-numeric characters like spaces, hyphens and parenthesis.

score 7 · Answer 6 · answered Jul 11 '20 at 18:53

Use `valueAsNumber`

Non-numbers can still be input. Make sure to check for validity, and handle mistakes.

const value = myInput.valueAsNumber
if (isNaN(value)) return // or other handling

If you require updates on every change:

myInput.addEventListener("change", () => {
    const newValue = myInput.valueAsNumber
    if (isNan(newValue)) return

    // Handle change
})

score 3 · Answer 7 · answered Dec 22 '20 at 03:25

You can also try to convert a number string into a number by using the + operator:

const ns = '3'
console.log(typeof ns)
console.log(typeof +ns)

Or you can safely convert only if it is able to do so:

const ns = '3'
const s = 'hello'

const toNum = v => !!+v ? +v : v

console.log(typeof toNum(ns))
console.log(typeof toNum(s))

The above snippet uses + to convert a value to a number. If it is unable to do so, +v returns NaN. It then use ! to convert NaN into a boolean and then use another ! to negate the boolean.

score 2 · Answer 8 · edited Sep 19 '17 at 16:49

2

type="number" only for browser validation. But you get a string. And you may use parseInt(num1) or + before string.

function addNum(n1, n2) {
  return +(n1) + +(n2);
}

edited Sep 19 '17 at 16:49

Iain J. Reid

978
1
11
23

answered Mar 04 '16 at 09:17

Julia Shirokova

29
2

4

`parseInt(num1)` without specifying a radix is the definition of asking for trouble. For decimal numbers, use `parseInt(num1, 10)` – or just cast the string to a number with the plus sign trick. – Hein Haraldson Berg Dec 06 '17 at 14:28
What is a "radix" and why is it asking for trouble? – JCLaHoot Feb 11 '18 at 22:07
2

Radix is the numeral system's base (https://en.wikipedia.org/wiki/Radix) so radix=16 will parse hexadecimal numbers, radix=2 binary and radix=10 decimal. Usually you'd use radix=10. – Wouter Lievens Sep 24 '18 at 08:02
type="number" is not only for browser validation but for valueAsNumber too. Also you can write your own inputCheck function based on type attribute which'll check type and make conversion string to number and pattern checking – Igor Fomenko Jun 15 '20 at 09:48

score 1 · Answer 9 · answered Mar 11 '22 at 00:50

1

If you are using variables in your html, try the following:

    <input type="number" (focusout)="(modifiedVal = +modifiedVal)" value="modifiedVal">

Here, modifiedVal is the variable and '+' before variable converts the variable into number.

answered Mar 11 '22 at 00:50

Sakshi Kaushik

11
1

HTML input type="number" still returning a string when accessed from javascript

9 Answers9

Use `valueAsNumber`

Linked

Related

HTML input type="number" still returning a string when accessed from javascript

9 Answers9

Use valueAsNumber

Linked

Related

Use `valueAsNumber`