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

2024-05-12

在下面的代码中,我试图调用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>                                                                                                                                                                                                    

考虑到房产名称,您的期望是合理的,但阅读实际情况规格/文档 http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#dom-input-valueasnumber:

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

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

这是一张桌子 http://www.w3.org/TR/2011/WD-html5-20110525/the-input-element.html#input-type-attr-summary该列表的type适用于valueAsNumber。这些都是:

  • 日期和时间 (datetime)(注意这个type=""现在在 HTML LS 中已过时)
  • Date (date)
  • Month (month)
  • Week (week)
  • Time (time)
  • 本地日期和时间(datetime-local)
  • Number (number)
  • Range (range)

观察一下type="text"上面的列表中明显没有, 所以textInput.valueAsNumber总会回来的NaN即使当isNaN( parseInt( textInput.value, 10 ) ) === false.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么“valueAsNumber”返回 NaN 作为值? 的相关文章

  • dojo dijit.form.DateTextBox 约束不起作用,datetextbox

    嗨 我是 javascript 和 dojo 的新手 我正在尝试使用两个带有下拉日历的 dijit DateTextBox 来建立数据库查询的日期范围 一旦选择了开始日期或结束日期 我想限制可用的日期 以便不可能选择按时间顺序排列在开始日期
  • 使用 vscode 调试器调试 next.js

    我已经使用安装了一个项目创建下一个应用程序 https github com segmentio create next app 我需要使用我的编辑器 vscode 调试服务器端渲染 所以我访问过vscode recipes 如何调试 ne
  • React js Stripe 结账不起作用

    我正在尝试在 React js 应用程序中呈现条带结账默认表单
  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 尝试将布尔 C# 变量传递给 javascript 变量并将其设置为 true

    在我的 aspx 页面中 我将布尔变量 C 传递给需要布尔类型的 javascript 函数 但遇到了问题 但是 C 变量返回 True 而 javascript 不喜欢大写 myjavascript 如果我将 c 变量转换为字符串 那么我
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

随机推荐