Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 631
Sainath S.R Avatar asked Mar 04 '16 08:03

Sainath S.R


People also ask

Why does input type number Return string?

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.

How do you make sure an input is a number JavaScript?

In JavaScript, there are two ways to check if a variable is a number : isNaN() – Stands for “is Not a Number”, if variable is not a number, it return true, else return false. typeof – If variable is a number, it will returns a string named “number”.

How do you convert a string to a number in JavaScript?

How to convert a string to a number in JavaScript using the parseInt() function. Another way to convert a string into a number is to use the parseInt() function. This function takes in a string and an optional radix. A radix is a number between 2 and 36 which represents the base in a numeral system.

Can input type be number in HTML?

The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed. min - specifies the minimum value allowed.


2 Answers

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.

like image 199
Arno Chauveau Avatar answered Sep 18 '22 22:09

Arno Chauveau


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.

Numeric keyboard screen-shot
like image 30
Álvaro González Avatar answered Sep 21 '22 22:09

Álvaro González