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>