一. 错误的示范

如下代码所示，如果需要用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;
        }

验证结果：

javascript给输入框赋值的一个误区的更多相关文章

  1. ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  2. JavaScript替换字符串中最后一个字符

    1.问题背景 在一个输入框中,限制字符串长度为12位.利用键盘输入一个数字,会将字符串中最后一位替换,比方:111111111111.再输入一个3,会显示111111111113 2.详细实现 < ...

  3. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  4. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  5. JavaScript解构赋值

    JavaScript解构赋值 JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下.总体来说,主要就两种地方使用解构赋值,一种是数组的解构赋值,另一种是对象的解构赋值.以 ...

  6. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  7. grep查询文本：问一个简单shell问题，将grep的输出赋值给一个变量

    问一个简单shell问题,将grep的输出赋值给一个变量 用grep命令得到的输出赋值给一个变量不成功. grep命令如下: 代码: $ grep -c '^abc' file.txt 输出为22,表 ...

  8. Android给自定义按键添加广播和通过广播给当前焦点输入框赋值

    一.给自定义按键添加广播 修改PhoneWindowManager.java中的interceptKeyBeforeDispatching方法 /frameworks/base/policy/src/ ...

  9. input用法，永远等待，直到用户输入值赋值给一个东西。

    input用法,永远等待,直到用户输入值赋值给一个东西. n1 = input('请输入用户名:') n1 = input('请输入密码:') print(n1) print(n1)

随机推荐

  1. JavaWeb 之过滤器

    1. 什么是过滤器 Servlet 是用来处理请求的, 过滤器是用来拦截请求的. 当用户请求某个 Servlet 时,会先执行部署在这个请求上的 Filter, 而 Filter 决定是否调用 Ser ...

  2. ES6学习笔记(二)——字符串扩展

    相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...

  3. HTML代码的美感

    每当我访问精美的网站,我都情不自禁地会去查看源代码.这就好比你拥有一副X光眼镜,能够看到任何人--甚至透视他们的遮羞布.这简直是天经地义的事情嘛!我迫不及待地想了解,这个精美的网站,是不是由同样具有美 ...

  4. hive bin下的进入beeline 命令行和hive有什么不同？

    Hive 0.11中引入的HiveServer2有一个自己的CLI叫Beeline. HiveCLI现在已经过时,与Beeline相比,其缺少多用户.安全和其他与HiveServer2兼容的特性. 从 ...

  5. STL之内存处理工具

    STL处理内存主要是使用五个全局函数construct,deconstruct,construct实现: template<typename T1,tyname T2> void cons ...

  6. ABAP发邮件函数

    步骤: 一.检查输入参数, (1)未指定文件類別代碼,(2)未指定郵件主題, (3)未指定郵件內容, (4)未指定發送人郵件地址, (5)未指定接收人郵件地址, 二.调用发送功能, (1)创建发送请求 ...

  7. js hash

    1)新建hash hash= {                 name  :  "image",                 "number" : &q ...

  8. window + document + height

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.     注意当浏览器窗口大小改变 ...

  9. python基础深入(元组、字符串、列表、字典)

    python基础深入(元组.字符串.列表.字典) 一.列表 1.追加 >>>list = [1,2,3,4] #用于在列表末尾添加新的对象,只能单个添加,该方法无返回值,但是会修改原 ...

  10. 树莓派使用DHT11温湿度传感器（C语言）

    硬件: 树莓派 2.0 DHT模块  接树莓派5V GND GPIO1 功能:读取传感器数据并打印出来 // //mydht11.c // #include <wiringPi.h> #i ...