前几天在练习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也是一样的操作,可是 namekeyword它们的行为表现就是不一样。

盯着这些代码看了半天,各种调试测试,可是还是想不明白。最后意外的发现,把 name这个变量名修改成其他值就好了,比如name1之类的。

这就让我怀疑人生了。c,java,js等语言中那些关键字,保留字,比如for,while,break,private,class,,throw等这些不能用于变量名是常识,可是一个name是个普通的字符串啊。

然后去google搜索,竟然发现了某篇博客的这句话:

有些东西是保留字,避免使用就行了,没有为什么... js中的保留字会导致奇怪的结果,各个浏览器保留字不同,导致结果也不同,尽量不要使用name,value,if,in,for之类的东西做变量名

然后在菜鸟教程,发现了一个(在我看来)很庞大的保留字,关键字表点击查看

好吧,js中的坑真多,菜鸟教程的那些保留字表格,还是多读几遍吧,免得最后因为这个细节问题而出现难以调试的bug。


作者:
www.yaoxiaowen.com

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等属于保留字的更多相关文章

  1. javascript中的关键字和保留字

    javascript中关键字的问题,将名称替换了下,确实就没有问题了.现在将它的关键字和保留字贴出来,便于日后查看和避免在次出现类似的问题. 1 关键字breakcasecatchcontinuede ...

  2. JavaScript中的this陷阱的最全收集

    JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...

  3. JavaScript中function的多义性

    JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错 ...

  4. JavaScript中的this陷阱的最全收集 没有之一

    当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...

  5. javascript中原型(prototype)与原型链

    javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有cl ...

  6. 转:JavaScript中的this陷阱的最全收集

    在其他地方看到的,觉得解释的狠详细,特此分享 当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清 ...

  7. 详解JavaScript中的Url编码/解码,表单提交中网址编码

    本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数escape / unescape ...

  8. JavaScript中知而不全的this (转)

    原文引自:http://www.cnblogs.com/snandy/p/4773184.html 都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言.它把函数式编程和面 ...

  9. 【JavaScript】JavaScript中的陷阱大集合

    本文主要介绍怪异的Javascript,毋庸置疑,它绝对有怪异的一面.当软件开发者开始使用世界上使用最广泛的语言编写代码时,他们会在这个过 程中发现很多有趣的“特性”.即便是老练的Javascript ...

随机推荐

  1. Android异步消息机制

    Android中的异步消息机制分为四个部分:Message.Handler.MessageQueue和Looper. 其中,Message是线程之间传递的消息,其what.arg1.arg2字段可以携 ...

  2. java学习笔记IO之字节输入输出流

    IO字节输入输出流 OutputStream:字节输出流 该抽象类是所有字节输出流的超类: 定义了一些共性的成员方法: 1.写入一个字节 void write(int b);//b表示字节 2.写入字 ...

  3. MySQL数据库数据信息迁移

    环境内核信息: [root@zabbix-01 ~]# uname -a Linux lodboyedu-01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar 21 19:2 ...

  4. Android OpenGL ES(八)----纹理编程框架

    1.把纹理载入进OpenGL中 我们的第一个任务就是把一个图像文件的数据载入到一个OpenGL的纹理中. 作为開始.让我们又一次舍弃第二篇的框架.又一次创建一个程序,新建一个util工具包,在该包下创 ...

  5. Object-C与Swift混合开发

    Object-C作为Apple的iOS App开发语言服务了很多个年头,2014年Apple推出了新的编程语言Swift.更高效更安全的口号再次吸引了一大批非iOS开发程序猿进入,小编觉得Swift代 ...

  6. 25个增强iOS应用程序性能的提示和技巧(0基础篇)

    在开发iOS应用程序时,让程序具有良好的性能是非常关键的. 这也是用户所期望的,假设你的程序执行迟钝或缓慢,会招致用户的差评.然而因为iOS设备的局限性,有时候要想获得良好的性能,是非常困难的. 在开 ...

  7. python抓取历年特码开奖记录

    背景: 小时候,有种游戏,两个主人公:白XX和曾XX,每个家庭把他俩像活菩萨一样供着,供他们吃,供他们穿 做生意的老板为了这两位活菩萨,关门大吉 农民为了这两位活菩萨卖牛卖田变卖家产 做官的为了这两位 ...

  8. 【Jquery系列】之DOM属性

    1   概述 本章将结合JQuery官方API,对Jquery属性进行分析与讲解.主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeA ...

  9. Java基础(四)-异常处理机制及其设计

    本篇主要是记录自己所理解的Java异常处理机制(基于jdk1.7)以及怎么去处理和设计异常.还记得当初学习Java异常这块的时候都没怎么注意它的用途,以为就是简单的处理下异常,我避免程序出现这样错误就 ...

  10. @Autowired注解在抽象类中实效的原因分析

    最近在工作中遇到这个问题,在抽象类中使用Autowired这个注解,注入mybatis的dao时,总是出现空指针异常,通过日志的打印,发现是这个dao注入失败为空.然后通过new出spring上下文对 ...