为什么“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">&nbsp;</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>

【问题讨论】：

标签： javascript type-conversion

【解决方案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。

【讨论】：

当心，这在边缘仍然不起作用：stackoverflow.com/questions/34251265/…

【解决方案3】：

我用演员固定：

 var nOP = Number(document.getElementById("hidNED").value);

在我的情况下，hidNED 的唯一可能内容是 0、1、2、3。
我对 javascript 很陌生，不知道 valueAsNumber，但如果我曾经尝试过的话，我可能已经尝试过了。

【讨论】：