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

時間 2019-11-20

標籤 javascript 獲取 value 三種方法注意欄目 JavaScript 简体版

原文原文鏈接

JavaScript獲取value值，主要有如下三種：html

1.用document.getElementById(「id名」).value來獲取（例1）；函數

2.經過form表單中的id名或者name名來獲取（例2）。spa

3.經過id名（不用寫getElementById，也不用放在表單中）直接獲取value值（例3）。可是直接經過value值獲取須要注意如下幾點：code

①變量名不能和id名同樣，不然無效；orm

②函數名不能和id名同樣，不然無效；htm

③若是須要獲取的id外面還有盒子，不能像表單那樣，將盒子的name或者id寫在前面，eg： var aa=box.need_id.value 是不行的，應該直接寫 var aa=need_id.value ;blog

例一、用document.getElementById(「id名」).value來獲取：ip

 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>

例二、經過表單中的id或者name獲取value值，效果和例1是同樣同樣的get

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

例三、直接經過id名獲取value值，效果也和例1是同樣同樣的input

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。