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

IT技术 javascript html
2021-02-03 03:39:16

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

退房：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非数字或非有限数字。

“时间value”是什么意思？
2021-03-29 03:39:16
Big Like 这个答案我的朋友， valueAsNumber 对我来说是一个新的。我正在寻找与已知解析不同的东西。
2021-03-30 03:39:16
@nafg据推测，“因为午夜1970年1月1日UTC +毫秒”输入类型date和time。
2021-04-06 03:39:16

HTMLInputElement.prototype.value（对于<input>元素）是一个字符串。

使用以下方法之一将您的数字字符串转换为正确的数字：

parseInt(value, 10);  // Parsing string as integer (whole number) from left to right.
parseFloat(value);    // Parsing string as floating point number (decimal) from left to right.
Number(value);        // Converting entire string to number.

JSBin 演示。

或者，+在值前添加一元：

+value;               // Equivalent to `Number(value)`.

要完全确定您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");

// 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

不要忘记阅读文档：

为什么在检查 not isNaN 时需要 parseFloat ？
2021-03-31 03:39:16

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

例如：

// uw will refer to the numerical value of the element with id = wakken
var uw = parseInt(document.getElementById("wakken").value);
我需要在哪里添加 parseFloat(value) 在代码中你可以在我的代码中进行编辑吗
2021-03-15 03:39:16
当我这样做时，我得到了意外的令牌 var 或意外的令牌；
2021-03-29 03:39:16
@KnackKwenie 我在答案中添加了一个例子。
2021-04-12 03:39:16 
var uw = parseInt(document.getElementById("wakken").value, 10); // (value, radix)
if (typeof uw === "number") console.log("works! 'uw' is an int");

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

@canon 不要乱用typeof，!isNaN(parseFloat(value)) && isFinite(value);而是用
2021-04-01 03:39:16
佳能你能改进我的答案吗？
2021-04-05 03:39:16
其它你可能感兴趣的问题
上一篇JavaScript 通过来自另一个的数据过滤数组 下一篇无法填充名为“status”的数组