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>

 

转载于:https://www.cnblogs.com/zzp-biog/p/10546813.html

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值