Javascript獲取value值的三種方法及注意點

   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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章