javascript 为什么“valueAsNumber”将 NaN 作为值返回?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18062069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 10:37:15  来源:igfitidea点击:

Why does 'valueAsNumber' return NaN as a value?

javascripttype-conversion

提问by Avery

In the code below, I am trying to call valueAsNumberbut I just get a NaN returned. When I use parseIntI get the result I expect. Why Is this?

在下面的代码中,我试图打电话,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>                                                                                                                                                                                                    

回答by Esailija

Your expectations are reasonable considering the property name, but reading actual specs/documentation:

考虑到属性名称,您的期望是合理的,但请阅读实际的规范/文档

The valueAsNumber IDL attribute represents the value of the element, interpreted as a number.

On getting, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN) value.

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

获取时,如果 valueAsNumber 属性不适用,如为输入元素的 type 属性的当前状态定义的,则返回一个非数字 (NaN) 值。

Here's a tablethat list's types that apply to valueAsNumber. These are:

这是一个表格,其中列出type了适用于的s valueAsNumber。这些是:

Date and Time,
Date,
Month,
Week,
Time
Local Date and Time,
Number
Range

日期和时间、
日期、
月、
周、
时间
本地日期和时间、
数字
范围

Yeah that's pretty weird API decision

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

回答by Joseph Silber

You have to set the typeof your inputto number:

你必须设置type你的inputnumber

<input name="number1" type="number">

Also, if the value is empty or non-numeric, it'll return NaN.

此外,如果该值为空或非数字,它将返回NaN.