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

Question

当我在输入中添加一个数字时,它不会改变保持在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")

Answer 1

退房:HTMLInputElement.valueAsNumber

元素的值,按顺序解释为以下之一:

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>

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

Answer 2

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

jsbin演示

通过使用将您转换"String" number为Number

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

或通过简单地unary +在值之前添加一个：

+value; // instead of parseInt()

要完全确定您value的电话号码，您还可以执行以下操作：

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

例如：

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
}

别忘了：阅读文档
parseInt（）
parseFloat（）
Number（）
算术运算符

Answer 3

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

例如：

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