JavaScript获得input元素value值的方法

更新时间：2023年10月09日 14:40:00 作者：zeroone001

在页面中我们最常见的页面元素就是input了,但是我们如何用JavaScript得到网页input中输入的value值呢,其实很简单,方法也不止一种,今天给大家分享两种JavaScript获得input元素value值的方法,感兴趣的朋友跟随小编一起看看吧

在页面中我们最常见的页面元素就是input了，但是我们如何用JavaScript得到网页input中输入的value值呢，其实很简单，方法也不止一种，据我总结比较常用的就是下面的两种方法，闲话不多说了，下面那就来看看我说的方法吧：

方法一、

<html>  
 <head>  
 <script language="javascript">  
  function print(){  
   var a=myform.name.value;  
   alert(a);  
  }  
 </script>  
 </head>  
 <body>  
  <form name="myform">  
   <input type="text" name="name" id="nn" />  
   <input type="button" name="button" value="获取" onclick="print()" />  
  </form>    
 </body>  
</html>

这是获取网页input值的方法之一，给from一个名字然后在JavaScript的地方就可以用form的名字来调用form表单里input元素的value属性可以得到值，并把值赋给a，最后用JavaScript的alert()打印方法打印出来。

方法二、

JS代码

<html>  
 <head>  
 <script language="javascript">  
  function print(){  
   var a=document.getElementById("nn").value;  
   alert(a);  
  }  
 </script>  
 </head>  
 <body>  
  <form>  
   <input type="text" name="name" id="nn" />  
   <input type="button" name="button" value="获取" onclick="print()" />  
  </form>    
 </body>  
</html>

到此这篇关于JavaScript获得input元素value值的方法的文章就介绍到这了,更多相关js获取input元素value值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

NodeJS 模块开发及发布详解分享
NodeJS 是一门年轻的语言，扩展模块并不太全，经常我们想用某个模块但是却找不到合适的
2012-03-03
解读ES6中class关键字
这篇文章主要介绍了ES6中class关键字,class是es6引入的最重要特性之一。本文通过实例代码给大家详解，需要的朋友可以参考下
2017-11-11
Js利用console计算代码运行时间的方法示例
最近看了一本书，发现了个计算代码执行时间的方法，感觉还挺有用的，所以这篇文章主要给大家介绍了关于Javascript利用console计算代码运行时间的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2017-09-09
js中如何完美的解析数据
这篇文章给大家分享了JS中完美解析数据的方法和技巧，对此有兴趣的朋友可以参考学习下。
2018-03-03
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
微信小程序上线发布流程图文详解
这篇文章主要介绍了微信小程序上线发布流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
常见的JavaScript内存错误及解决方法
这篇文章主要介绍了常见的JavaScript内存错误,JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。下面我们就来看看下面文章对JavaScript内存错误的各种举例说明吧
2021-12-12
canvas仿iwatch时钟效果
本文主要介绍了canvas仿iwatch时钟效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
详解JS: reduce方法实现 webpack多文件入口
本篇文章主要介绍了详解JS: reduce方法实现 webpack多文件入口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
小程序扫描普通链接二维码跳转小程序指定界面方法
这篇文章主要介绍了小程序扫描普通链接二维码跳转小程序指定界面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05