Javascript 输入值是字符串而不是数字

Input value is a string instead of a number

提问by Knack Kwenie

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 the input on the web how do i get a number back instead of a string?

当我在输入中添加一个数字时，它不会改变保持在 5 的值，当我进入控制台并输入 uw.value 时，我得到“6”而不是我在网络输入中输入的 6我会得到一个数字而不是一个字符串吗？

<form>
    <input type="number" id="wakken" type="number" value=5><br>
    <input max="30" min="0" name="ijsberen" placeholder="Ijsberen" id="ijsberen" type="number" value= "5"><br>
    <input max="30" min="0" name="wakken" placeholder="Penguins" id="penguins" type="number" value= 0><br>
    <input type="button" value="submit" onclick="check()">
</form>      

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

回答by canon

Check out HTMLInputElement.valueAsNumber:

退房：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

元素的值，按顺序解释为以下之一：

1. 时间值
2. 一个号码
3. 如果无法转换，则为 null

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 NaNfor non-numerics or non-finite numbers.}

_{这将返回NaN非数字或非有限数字。}

回答by Roko C. Buljan

Since inputHTMLElement.valuereturns a "String"....

由于输入HTMLElement.value返回一个“字符串”......

jsbin demo

jsbin 演示

Convert your "String" numberto Numberby using

将您"String" number要Number使用

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:

或者简单地unary +在值前添加一个：

+value; // instead of parseInt()

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

要完全确定您value是一个数字，您还可以执行以下操作：

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

不要忘记：阅读文档
parseInt()
parseFloat()
Number()
算术运算符

回答by JCOC611

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

您可以使用parseFloat(value)小数或parseInt(value)整数将值从字符串转换为数字。

For example:

例如：

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

回答by Tim Visser

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.

将记录“有效！'uw' is an int”，因为我们收集了该值并用于parseInt(_: String)将其转换为 int。