快捷導(dǎo)航

JavaScript獲得input元素value值的方法

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

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

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

方法一、

<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一個(gè)名字然后在JavaScript的地方就可以用form的名字來調(diào)用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>

到此這篇關(guān)于JavaScript獲得input元素value值的方法的文章就介紹到這了,更多相關(guān)js獲取input元素value值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript中的class類詳解
JavaScript?中的類（Class）是一種新的語言特性，它讓我們可以使用面向?qū)ο缶幊痰乃枷雭砀臃奖愕亟M織和管理代碼。在本文中，我們將詳細(xì)介紹?JavaScript?中的類特性，感興趣的同學(xué)可以借鑒閱讀
2023-05-05
js仿百度切換皮膚功能（html+css）
這篇文章主要為大家詳細(xì)介紹了JavaScript仿百度切換皮膚功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
Javascript生成帶參數(shù)的二維碼示例
這篇文章主要給大家介紹了Javascript生成帶有參樹二維碼的方法,實(shí)現(xiàn)的方法還是很簡(jiǎn)單的，有需要的朋友們可以參考借鑒。下面來一起看看吧。
2016-10-10
使用sql.js在前端項(xiàng)目中接入SQLite數(shù)據(jù)庫
sql.js為前端開發(fā)者提供了一種強(qiáng)大的工具,可以在瀏覽器環(huán)境中使用SQLite的完整功能,本文介紹了如何在前端項(xiàng)目中接入sql.js,執(zhí)行基本的SQL操作,實(shí)現(xiàn)數(shù)據(jù)持久化,以及在React項(xiàng)目中的應(yīng)用示例,同時(shí),我們也討論了性能優(yōu)化、最佳實(shí)踐以及sql.js的適用場(chǎng)景和限制
2025-05-05
js is_valid_filename驗(yàn)證文件名的函數(shù)
有時(shí)候我們需要對(duì)文件名進(jìn)行控制，包括一些特殊命名的文件與特殊符號(hào)的文件名進(jìn)程替換，那么就可以使用下面的函數(shù)
2017-07-07
為網(wǎng)站代碼塊pre標(biāo)簽增加一個(gè)復(fù)制代碼按鈕代碼
寫文章的時(shí)候，作為一名專業(yè)的碼農(nóng)，經(jīng)常會(huì)在文章中粘貼一些代碼。有的時(shí)候代碼塊比較長(zhǎng)，在后期使用中需要復(fù)制這段代碼就比較麻煩
2021-11-11
JavaScript命名空間模式實(shí)例詳解
這篇文章主要介紹了JavaScript命名空間模式,結(jié)合實(shí)例形式分析了javascript命名空間模式的相關(guān)概念、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下
2019-06-06
深入淺出JavaScript中base64編碼原理
今天翻開舊項(xiàng)目發(fā)現(xiàn)挺多圖片相關(guān)的插件都是用?base64?來顯示圖片的。談到?base64，腦海遐想翩翩，思緒回蕩之下?base64?瑕瑜互見。這篇文章主要是記錄了工作中遇見的問題并加以總結(jié)，如有不妥請(qǐng)指正
2023-02-02
JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
2025-02-02
如何提高javascript加載速度
本文主要對(duì)提高javascript加載速度的方法進(jìn)行介紹，具有很好的參考價(jià)值，需要的朋友一起來看下吧
2016-12-12