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

Answer 1

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.

Answer 2

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);

}

Answer 3

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.

Answer 4

1. HTML Input elements are documented to return string representing a number. See the documentation here : Documentation of HTML Input

2. 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.

Answer 5

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);
}

Answer 6

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
})