javascript中name,value等属于保留字
前几天在练习js代码的时候,碰到了一个坑,这是让人醉了。
html代码如下:
<div>
<div>
<!--输入 123456-->
<lable>请输入员工编号</lable>
<input id="keyWord" type="text">
</div>
<div>
<!--输入 moran-->
<lable>请输入员工姓名</lable>
<input id="staffName" type="text">
</div>
<div>
<!--点击保存,输出监听函数中的log信息 @author www.yaoxiaowen.com-->
<button id="save">保存</button>
</div>
</div>
js代码如下:
var keyword=document.getElementById("keyWord");
var name=document.getElementById("staffName");
var save=document.getElementById("save");
//输出: keyword=[object HTMLInputElement] keyword.value =
console.log("keyword=" + keyword + "\t keyword.value = " +keyword.value);
var keyValue = keyword.value;
//输出: ===
if (keyValue === ""){
console.log("===");
}else {
console.log("!==");
}
//输出:name=[object HTMLInputElement] name.value = undefined
console.log("\t name=" + name + "\t name.value = " +name.value);
//@author www.yaoxiaowen.com
save.onclick=function(){
//输出: keyword=[object HTMLInputElement] keyword.value = 123456
console.log("keyword=" + keyword + "\t keyword.value = " +keyword.value);
//输出:name=[object HTMLInputElement] name.value = undefined
console.log("\t name=" + name + "\t name.value = " +name.value);
//输出: document.getElementById('staffName').value = moran
console.log("document.getElementById('staffName').value = " + document.getElementById("staffName").value);
}
代码注释中已经写了相应的注释输出,完全一样的 <input>
标签,js中获得Element也是一样的操作,可是 name
和keyword
它们的行为表现就是不一样。
盯着这些代码看了半天,各种调试测试,可是还是想不明白。最后意外的发现,把 name
这个变量名修改成其他值就好了,比如name1
之类的。
这就让我怀疑人生了。c,java,js等语言中那些关键字,保留字,比如for
,while
,break
,private
,class
,,throw
等这些不能用于变量名是常识,可是一个name
是个普通的字符串啊。
然后去google搜索,竟然发现了某篇博客的这句话:
有些东西是保留字,避免使用就行了,没有为什么... js中的保留字会导致奇怪的结果,各个浏览器保留字不同,导致结果也不同,尽量不要使用name,value,if,in,for之类的东西做变量名
然后在菜鸟教程,发现了一个(在我看来)很庞大的保留字,关键字表点击查看。
好吧,js中的坑真多,菜鸟教程的那些保留字表格,还是多读几遍吧,免得最后因为这个细节问题而出现难以调试的bug。
github:
https://github.com/yaowen369
欢迎对于本人的博客内容批评指点,如果问题,可评论或邮件(yaowen369@gmail.com)联系
<p >
欢迎转载,转载请注明出处.谢谢
</p>
<script type="text/javascript">
function Curgo()
{
window.open(window.location.href);
}
</script>
javascript中name,value等属于保留字的更多相关文章
- javascript中的关键字和保留字
javascript中关键字的问题,将名称替换了下,确实就没有问题了.现在将它的关键字和保留字贴出来,便于日后查看和避免在次出现类似的问题. 1 关键字breakcasecatchcontinuede ...
- JavaScript中的this陷阱的最全收集
JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...
- JavaScript中function的多义性
JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错 ...
- JavaScript中的this陷阱的最全收集 没有之一
当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...
- javascript中原型(prototype)与原型链
javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有cl ...
- 转:JavaScript中的this陷阱的最全收集
在其他地方看到的,觉得解释的狠详细,特此分享 当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清 ...
- 详解JavaScript中的Url编码/解码,表单提交中网址编码
本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数escape / unescape ...
- JavaScript中知而不全的this (转)
原文引自:http://www.cnblogs.com/snandy/p/4773184.html 都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言.它把函数式编程和面 ...
- 【JavaScript】JavaScript中的陷阱大集合
本文主要介绍怪异的Javascript,毋庸置疑,它绝对有怪异的一面.当软件开发者开始使用世界上使用最广泛的语言编写代码时,他们会在这个过 程中发现很多有趣的“特性”.即便是老练的Javascript ...
随机推荐
- yii2.0中数据缓存之增删改查
public function actionSss(){ /* * 获取到缓存 * 这里是获取的是根目录下 的common/main.php中的缓存类组件 * */ $cache=\Yii::$app ...
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- DIN(Deep Interest Network of CTR) [Paper笔记]
背景 经典MLP不能充分利用结构化数据,本文提出的DIN可以(1)使用兴趣分布代表用户多样化的兴趣(不同用户对不同商品有兴趣)(2)与attention机制一样,根据ad局部激活用户兴趣相关的兴趣(用 ...
- PHP中的会话控制
了解HTTP(超文本传输协议)可以知道,它采用请求与响应的模式,最大的特点就是无连接无状态. 无连接:每次连接仅处理一个客户端的请求,得到服务器响应后,连接就结束了 无状态:每个请求都是独立的,服务器 ...
- 自学OpenCV时遇到的一些错误(捂脸ing,当年确实好多不懂...)
6.8/14 opencv环境配置好了, 属性也设置对了, 但是使用VideoCapture类的时候, 还是出错. 右键可以查看其定义, 但是就是 出错. 漏掉了#include "s ...
- 数据结构(C实现)------- 最小生成树之Prim算法
[本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020] 算法描写叙述 假设连通图是一个网,则称该网中全部生成树中权值总和最小的生成树 ...
- 【NOI2010】海拔【平面图最小割】
[问题描写叙述] YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见.能够将YT市看作 一个正方形,每个区域也可看作一个正方形.从而.YT城市中包含(n+1)×(n+ ...
- ImageLoader配置(凝视)
/** * 配置ImageLoader */ private void configImageLoader() { File discCacheDir = StorageUtils.getOwnCac ...
- 被动式Telnet研究及实现(解决内外网远程维护的困难)-part A
欢迎转载.转载请保留原文链接:http://blog.csdn.net/mikulee/article/details/40149779 项目背景及需求: 近期公司有一个项目: 我们在一个arm主机上 ...
- MyBatis简单使用
MyBatis MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使 ...