Javascript獲取value值的三種方法及註意點
阿新 • • 發佈：2019-03-17
tel NPU javascrip click 註意 round scrip htm 直接
JavaScript獲取value值，主要有以下三種：
1.用document.getElementById(“id名”).value來獲取（例1）；
2.通過form表單中的id名或者name名來獲取（例2）。
3.通過id名（不用寫getElementById，也不用放在表單中）直接獲取value值（例3）。但是直接通過value值獲取需要註意以下幾點：
①變量名不能和id名一樣，否則無效；
②函數名不能和id名一樣，否則無效；
③如果需要獲取的id外面還有盒子，不能像表單那樣，將盒子的name或者id寫在前面，eg： var aa=box.need_id.value 是不行的，應該直接寫 var aa=need_id.value ;
例1、用document.getElementById(“id名”).value來獲取：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>example</title> 6 </head> 7 <body> 8 <!--文本輸入框--> 9<input type="text" id="input"> 10 <br> 11 <!--通過點擊click按鈕，彈窗中顯示文本框內用戶輸入的內容--> 12 <input type="button" value="click" id="btn" onclick="start()"> 13 <script> 14 function start(){ 15 var aa=document.getElementById("input").value; //通過document.getElementById(“id名”).value來獲取value值。 16 alert(aa); 17 } 18 </script> 19 </body> 20 </html>
例2、通過表單中的id或者name獲取value值，效果和例1是一樣一樣的
<body> <form action="" name="frm"> <!--放在表單中的文本輸入框--> <input type="text" id="input1" name="input2" > <br> <!--通過點擊click按鈕，彈窗中顯示文本框內用戶輸入的內容--> <input type="button" value="click" id="btn" onclick="start()"> </form> <script> function start(){ var aa=frm.input1.value; //通過表單中的id獲取value值;或者 var aa=frm.input2.value;通過name獲取也可以。 alert(aa); } </script> </body>
例3、直接通過id名獲取value值，效果也和例1是一樣一樣的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example</title> </head> <body> <!--文本輸入框--> <input type="text" name="input1" id="input2"> <br> <!--通過點擊click按鈕，彈窗中顯示文本框內用戶輸入的內容--> <input type="button" value="click" id="btn" onclick="start()"> <script> function start(){ var aa=input2.value; //直接通過id名獲取value值，但是如果寫 var input2=input2.value; alert(input2)則無效。 alert(aa); } </script> </body> </html>
Javascript獲取value值的三種方法及註意點