JavaScript獲得input元素value值的方法

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

在頁面中我們最常見的頁面元素就是input了,但是我們如何用JavaScript得到網(wǎng)頁input中輸入的value值呢,其實很簡單,方法也不止一種,今天給大家分享兩種JavaScript獲得input元素value值的方法,感興趣的朋友跟隨小編一起看看吧

在頁面中我們最常見的頁面元素就是input了，但是我們如何用JavaScript得到網(wǎng)頁input中輸入的value值呢，其實很簡單，方法也不止一種，據(jù)我總結比較常用的就是下面的兩種方法，閑話不多說了，下面那就來看看我說的方法吧：

方法一、

<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>

這是獲取網(wǎng)頁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值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js get和post請求實現(xiàn)代碼解析
這篇文章主要介紹了js get和post實現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-02-02
ES6知識點整理之String字符串新增常用方法示例
這篇文章主要介紹了ES6知識點整理之String字符串新增常用方法,結合實例形式分析了ES6字符串String includes,startsWith,endsWith等方法相關使用技巧,需要的朋友可以參考下
2019-07-07
js函數(shù)的延遲加載實現(xiàn)代碼
延遲加載的函數(shù)，第一次調用后，會覆蓋原來的老函數(shù)，以后再次調用的是新函數(shù)，不會再進行條件的判斷，提升效率
2012-10-10
jquery ajax應用中iframe自適應高度問題解決方法
很多管理系統(tǒng)中，都使用iframe進行信息內容的展示方式，或者作為主菜單的鏈接展示內容。使用iframe的問題就是自適應高度的問題
2014-04-04
基于JavaScript+HTML編寫一個日期選擇插件
在現(xiàn)代Web應用程序中,日期選擇器是一個非常常見的組件,用戶可以使用它來選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來創(chuàng)建一個簡單但功能強大的日期選擇插件,這個日期選擇插件是比較考驗Js基本功的,需要的朋友可以參考下
2023-10-10
js數(shù)組與字符串的相互轉換方法
這篇文章主要介紹了js數(shù)組與字符串的相互轉換方法,是js中常用的技巧,需要的朋友可以參考下
2014-07-07
layui table 列寬百分比顯示的實現(xiàn)方法
今天小編就為大家分享一篇layui table 列寬百分比顯示的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Web安全之XSS攻擊與防御小結
這篇文章主要介紹了Web安全之XSS攻擊與防御小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
JS iFrame加載慢怎么解決
這篇文章主要介紹了JS iFrame加載慢的解決方法，非常實用，感興趣的朋友一起學習吧
2016-05-05
微信小程序下拉加載和上拉刷新兩種實現(xiàn)方法詳解
這篇文章主要介紹了微信小程序下拉加載和上拉刷新兩種實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09