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

1|0一. 错误的示范

如下代码所示，如果需要用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，然而，获得的值并没有写入到下方的用户名和密码框中

2|0二. 如何解决

只需改动上面红色的四行代码。如下所示，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;    
        }

验证结果：

__EOF__

本文作者：cnhkzyy
本文链接：https://www.cnblogs.com/my_captain/p/9185036.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！