为啥“valueAsNumber”返回 NaN 作为值？
Posted
技术标签:
【中文标题】为啥“valueAsNumber”返回 NaN 作为值？【英文标题】：Why does 'valueAsNumber' return NaN as a value?为什么“valueAsNumber”返回 NaN 作为值？ 【发布时间】：2013-08-06 09:22:40 【问题描述】：在下面的代码中，我试图调用valueAsNumber，但我只得到一个 NaN 返回。当我使用parseInt 时，我得到了我期望的结果。这是为什么呢？
<html>
<head>
<title>javascript: Demo 1</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="numbers">
<div id="inputs">
<form name="inputForm">
<div class="prompt">Number 1: <input name="number1" type="text"></div>
<div class="prompt">Number 2: <input name="number2" type="text"></div>
</form>
</div>
<div id="result">
<div class="prompt">RESULT: <span id="operation_result"> </span></div>
</div>
</div>
<div id="operations">
<p><a id="add_link" href="#" onClick="add(this)">ADD</a></p>
</div>
<script type="text/javascript">
function add(linkElement)
// var value1 = parseInt(document.inputForm.number1.value);
// var value2 = parseInt(document.inputForm.number2.value);
var value1 = document.inputForm.number1.valueAsNumber;
var value2 = document.inputForm.number2.valueAsNumber;
var result = value1 + value1;
document.getElementById('operation_result').innerHTML = result;
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：考虑到属性名称，您的期望是合理的，但阅读实际的specs/documentation：
valueAsNumber IDL 属性表示元素的值， 解释为数字。
获取时，如果 valueAsNumber 属性不适用，如定义 对于输入元素的类型属性的当前状态，然后返回一个 非数字 (NaN) 值。
Here's a table 该列表的types 适用于valueAsNumber。它们是：
datetime)（注意这个 type="" 现在在 HTML LS 中已过时）
日期 (date)
月 (month)
周 (week)
时间 (time)
本地日期和时间 (datetime-local)
号码 (number)
范围 (range)
请注意type="text" 明显不在上述列表中，因此textInput.valueAsNumber 将始终返回NaN，即使isNaN( parseInt( textInput.value, 10 ) ) === false 时也是如此。
【讨论】：
即仍然返回 NaN。在 Windows 10 中尝试了 type=number。 一切正常，只需输入：inp_el.type='number'; inp_el.value='12' 或 12 你会看到 valueAsNumber=12【参考方案2】：您必须将input 的type 设置为number：
<input name="number1" type="number">
另外，如果值为空或非数字，它将返回NaN。
【讨论】：
当心，这在边缘仍然不起作用：***.com/questions/34251265/…【参考方案3】：我用演员固定：
var nOP = Number(document.getElementById("hidNED").value);
在我的情况下，hidNED 的唯一可能内容是 0、1、2、3。 我对 javascript 很陌生，不知道 valueAsNumber，但如果我曾经尝试过的话，我可能已经尝试过了。
【讨论】：
以上是关于为啥“valueAsNumber”返回 NaN 作为值？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 [NaN].includes(NaN) 在 JavaScript 中返回 true？