Input value is a string instead of a number

Question

When i add a number to the input it doesn\'t change the value that stays at 5 and when i go in the console and type uw.value i get \"6\" back instead of 6 which i typed in

Answer 1

Check out HTMLInputElement.valueAsNumber:

The value of the element, interpreted as one of the following in order:

1. a time value
2. a number
3. null if conversion is not possible

var testInput = document.getElementById("test-input");

function handleInput(e){
  var value = this.valueAsNumber;
  console.log("type: %s, value: %o", typeof value, value);  
}

testInput.addEventListener("input", handleInput);
  
handleInput.call(testInput);

<input type="number" id="test-input" type="number" value=5>

_{This will return NaN for non-numerics or non-finite numbers.}

Answer 2

Since input HTMLElement.value returns a "String"....

jsbin demo

Convert your "String" number to Number by using

parseInt(value, 10);  // for (whole) integer numbers
parseFloat(value);    // for (point) floated numbers
Number(value);        // to Number Object

or by simply adding a unary + before the value:

+value; // instead of parseInt()

To be totally sure your value is a number you can also do:

if(!isNaN(parseFloat(el.value)) && isFinite(el.value)){
   /*true if element's value is a number (or a number in string) */
}

For example:

var uw = document.getElementById("wakken");
var ui = document.getElementById("ijsberen");
var up = document.getElementById("penguins");

function check() {
  // Log Strings
  console.log(uw.value);                  // "5"
  console.log(ui.value);                  // "5"
  console.log(up.value);                  // "0"
  // Log Numbers
  console.log(Number(uw.value));          // 5
  console.log(+uw.value);                 // 5
  console.log(parseInt(ui.value, 10));    // 5
  console.log(parseFloat(up.value));      // 0
}

Don't forget to: read the Docs
parseInt()
parseFloat()
Number()
Arithmetic operators

Answer 3

You can convert the value from string to number using parseFloat(value) for decimals or parseInt(value) for integers.

For example:

// uw will refer to the numerical value of the element with id = wakken
var uw = parseInt(document.getElementById("wakken").value);

Answer 4

var uw = parseInt(document.getElementById("wakken").value, 10); // (value, radix)
if (typeof uw === "number") console.log("works! 'uw' is an int");

Will log "works! 'uw' is an int", because we collected the value and used parseInt(_: String) to convert it to an int.