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)
随机推荐
- 微信开发模板--easywechat
链接地址:https://easywechat.org/zh-cn/docs/installation.html
- Django 之 权限系统(组件)
参考: http://www.cnblogs.com/yuanchenqi/articles/7609586.html
- T-SQL利用笛卡尔积累计、累加
T-SQL利用笛卡尔积累计.累加 笛卡尔积 --原始数据 select templateid,needitem1Count from db_tank..TS_CardMain --累计数据 selec ...
- (4.4)dbcc checkdb 数据页修复
转自:http://blog.51cto.com/lzf328/955852 三篇 一.创建错误数据库 以前看Pual写过很多数据恢复的文章,他很多的测试都是自己创建的Corrupt数据库,其实我们自 ...
- CS224n学习资源汇总
一.课程网站: http://web.stanford.edu/class/cs224n/archive/WWW_1617/index.html 二.视频(中文字幕) http://www.mooc. ...
- start() vs. run()
I'm reading a Blog. But a rather familiar question occurred to me, "What's the difference ...
- 两张Excel表比较,两个for循环比较优化使用Contains
将一个Excel表中的sheet中的一列导出到List<string>,用一个for循环循环另一张表中的数据,看是否在第一张表中的Contains中
- python之路 内置函数,装饰器
一.内置函数 #绝对值 abs() #所有值都为真才为真 all() #只要有一个值为真就为真 any() #10进制转成二进制 bin() #10进制转成八进制 oct() #10进制转成十六进制 ...
- 【leetcode刷题笔记】Word Ladder II
Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...
- Chrome 的 Rendering 监听器
在研究动画优化时,有被安利一款这个...啥,额,就是,唔...就是一个能让我们看到动画卡不卡的监听器 火狐的“高亮重绘区域”个人感觉并不好用,而 Safari 竟然没找到,而 IE11 也没有(公司的 ...