Question

在下面的代码中，我尝试拨打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>

Answer 1

考虑到酒店名称，您的期望是合理的，但请阅读实际的specs/documentation：

valueAsNumber IDL属性表示元素的值，   解释为数字。

获取时，如果valueAsNumber属性不适用，则定义   对于input元素的type属性的当前状态，然后返回a   非数字（NaN）值。

Here's a table列出适用于type的{{1}}。这些是：

日期和时间，
日期，
月，
周，
时间
当地日期和时间，
数
范围

是的，这是非常奇怪的API决定

Answer 2

您必须将type的{{1}}设置为input：

number

此外，如果值为空或非数字，则返回<input name="number1" type="number">。

Answer 3

我用演员表固定：

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

就我而言，hidNED 的可能内容只有 0、1、2、3。
我对 javascript 很陌生，不知道 valueAsNumber 但如果我曾经尝试过，我可能已经尝试过。

为什么'valueAsNumber'将NaN作为值返回？

3 个答案: