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>省 <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()" /> <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给输入框赋值的一个误区的更多相关文章
- 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的返回值自动进行各种序列化处理(序列化为 ...
- JavaScript替换字符串中最后一个字符
1.问题背景 在一个输入框中,限制字符串长度为12位.利用键盘输入一个数字,会将字符串中最后一位替换,比方:111111111111.再输入一个3,会显示111111111113 2.详细实现 < ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- JavaScript解构赋值
JavaScript解构赋值 JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下.总体来说,主要就两种地方使用解构赋值,一种是数组的解构赋值,另一种是对象的解构赋值.以 ...
- 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签
今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...
- grep查询文本:问一个简单shell问题,将grep的输出赋值给一个变量
问一个简单shell问题,将grep的输出赋值给一个变量 用grep命令得到的输出赋值给一个变量不成功. grep命令如下: 代码: $ grep -c '^abc' file.txt 输出为22,表 ...
- Android给自定义按键添加广播和通过广播给当前焦点输入框赋值
一.给自定义按键添加广播 修改PhoneWindowManager.java中的interceptKeyBeforeDispatching方法 /frameworks/base/policy/src/ ...
- input用法,永远等待,直到用户输入值赋值给一个东西。
input用法,永远等待,直到用户输入值赋值给一个东西. n1 = input('请输入用户名:') n1 = input('请输入密码:') print(n1) print(n1)
随机推荐
- Python3.6全栈开发实例[023]
23.税务部门征收所得税. 规定如下: (1)收入在2000以下的. 免征. (2)收入在2000-4000的, 超过2000部分要征收3%的税. (3)收入在4000-6000的, 超过4000部分 ...
- mui 视频播放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 小程序 欢迎页面 navigateTo和tabBar不能同时指向一个路径
小程序navigateTo和tabBar不能同时指向一个路径 wx.navigateTo和wx.redirectTo不允许跳转到tabBar页面,只能用wx.switchTab跳转到tabBar页面. ...
- 我的第二个Python小程序
输出0-100之间的偶数: # Author: fansik # Description: Output an even number between 0 and 100 # method one n ...
- python常用模块——sys模块
sys模块的功能很多,下面介绍几个常用的模块. 1.sys.argv:从外部向程序内部传递参数 #!/usr/bin/env python import sys print(sys.argv[0]) ...
- LeetCode:搜索旋转排序数组【33】
LeetCode:搜索旋转排序数组[33] 题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ...
- Spring:笔记整理(1)——HelloWorld
Spring:笔记整理(1)——HelloWorld 导入JAR包: 核心Jar包 Jar包解释 Spring-core 这个jar 文件包含Spring 框架基本的核心工具类.Spring 其它组件 ...
- UI组件之UIImage
UIImageView:图像视图,用于在应用程序中显示图片 UIImage:是将图片文件转换为程序中的图片对象 UIImageView是UIImage的载体 方法一:用此方法创建图片对象,会将图片ca ...
- 在树莓派上用Python控制LED
所需材料 一个已经安装配置好了的树莓派 连接控制树莓派所用的其他必须设备 200Ω电阻 x 8 led x 8 面包板及连接线若干 电路连接 电路图 按照电路图所示,在面包板上进行连接. 编写程序 安 ...
- 虚构 css 父级选择器
能 CSS 解决的绝不用 JS,这句话又一次故作装逼地说出来还是挺爽的... 比如下拉列表,能用 CSS 的 :focus 就不用 JS 的 .on("focus blur") 能 ...