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


    一. 错误的示范

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

     

     

    二. 如何解决

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

    验证结果:

  • 相关阅读:
    大数据技术之_16_Scala学习_04_函数式编程-基础+面向对象编程-基础
    大数据技术之_16_Scala学习_03_运算符+程序流程控制
    大数据技术之_16_Scala学习_01_Scala 语言概述
    通过创建一个简单的骰子游戏来探究 Python
    在Linux系统中创建SSH服务器别名
    DNS原理及劫持问题
    详细介绍:Kubernetes1.4版本的新功能
    Linux系统中五款好用的日志分析工具
    wc命令——Linux系统高效数据统计工具
    Linux系统内核正式进入5.0版本时代
  • 原文地址:https://www.cnblogs.com/my_captain/p/9185036.html
Copyright © 2020-2023  润新知