首页 技术 正文
技术 2022年11月14日
0 收藏 882 点赞 3,442 浏览 2391 个字

一. 错误的示范

如下代码所示,如果需要用javascript获取id为username1, password1的输入框的值,将其写入id为username2, password2的输入框,那么红线区域的代码是不可取的

这样看到的结果是,alert依次弹出username1, password1的输入框的值,事实上并没有成功的赋值

这是为什么?因为var username2 = document.getElementById(“username2”).value; 这行代码中username2的值是一个空字符串,举个例子,如果username1 = “123”, 那么username2 = username1;就等价于””=”123″,把一个字符串赋值给空字符串,没有意义。同理,password2 = password1;也是一个道理

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>html表单作业</title>    <script type="text/javascript">        function myFunc(){            var username1 = document.getElementById("username1").value;            var password1 = document.getElementById("password1").value;            alert("您的账号是: " + username1);            alert("您的密码是: " + password1);            var username2 = document.getElementById("username2").value;            var password2 = document.getElementById("password2").value;            username2 = username1;            password2 = password1;        }    </script></head><body>    <form>        用户名:<input type="text" id="username1" />        <br />        密码:<input type="password" id="password1" />        <br />        性别:<input type="radio" name="sex" value="male" />男        <input type="radio" name="sex" value="female" />女        <br />        头像:<input type="file" name="file" />        <br />        住址:<select id="city" name="city">                <option>选择</option>                  <option>广东</option>                  <option>湖南</option>                  <option>江西</option>              </select>省&nbsp;&nbsp;              <select>                  <option>选择</option>                  <option>深圳</option>                  <option>长沙</option>                  <option>南昌</option>              </select>市        <br />        <br />        爱好:<input type="checkbox" value="1" />篮球              <input type="checkbox" value="2" />足球              <input type="checkbox" value="3" />看书        <br />        <br />        备注信息:<textarea rows="3" cols="15">这是我的第一个网页</textarea>        <br />        <br />        <br />        <br />        <br />        用户名:<input type="text" id="username2" />        <br />        密码:<input type="password" id="password2" />        <br />        <input type="button" value="登录" onclick="myFunc()" />&nbsp;&nbsp;        <input type="reset" />        </form></body></html>

这段代码的结果是:我们可以看到,我们在上方的用户名框输入123,密码框输入567,alert依次弹出123,567,然而,获得的值并没有写入到下方的用户名和密码框中

javascript给输入框赋值的一个误区

javascript给输入框赋值的一个误区

javascript给输入框赋值的一个误区

二. 如何解决

只需改动上面红色的四行代码。如下所示,username2.value有两个含义,1. 它的值是空字符串;2. 它表示元素对象的属性,username2.value = username1; 就是把id为username1的输入框的值赋值给id为username2的对象的属性

var username2 = document.getElementById("username2");var password2 = document.getElementById("password2");username2.value = username1;password2.value = password1;

为了让代码更清晰,可以这样改:

function myFunc(){            var username1 = document.getElementById("username1");            var password1 = document.getElementById("password1");            alert("您的账号是: " + username1.value);            alert("您的密码是: " + password1.value);            var username2 = document.getElementById("username2");            var password2 = document.getElementById("password2");            username2.value = username1.value;            password2.value = password1.value;        }

验证结果:

javascript给输入框赋值的一个误区

javascript给输入框赋值的一个误区

javascript给输入框赋值的一个误区

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,906
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,430
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,247
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,058
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,690
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,727