昨天一个刚写前端不久的同学发消息问这个问题（如下图）：

HTML代码为（省略部分代码）：

 <head>

 <script src="test.js"></script>

 </head>

 <body>

     <div id="output">0</div>

     <button id="plus">+1</button>

     <button id="minus">-1</button>

 </body>

test.js最初代码为：

 var plus=document.getElementById('plus');

 var minus=document.getElementById('minus');

 var output=document.getElementById('output');

 plus.addEventListener('click',function(){

     console.log('+1');

 },false);

结果就为控制台报出了“Uncaught TypeError: Cannot read property 'addEventListener' of null”的错误，究其原因，是因为在HTML的DOM结构未加载完成时，就已经加载好js文件，并对DOM元素进行绑定事件操作，因此不能会报出null的错误，有时也可能会出现undefined的错误。

解决这个问题的方法，可以从以下两种方式就行考虑：

一、在HTML文件中将<script>放在DOM最后加载，即：

 <body>

     <div id="output">0</div>

     <button id="plus">+1</button>

     <button id="minus">-1</button>

     <script src="test.js"></script>

 </body>

二、在js代码块放到window.onload事件中，待基本文档结构加载完成后再执行事件绑定：

 window.onload = function() {

     var plus = document.getElementById('plus');

     var minus = document.getElementById('minus');

     var output = document.getElementById('output');

     plus.addEventListener('click', function() {

     console.log('+1');

     }, false);

 }

当然了，这个也可以用jQuery的ready函数做，原理类似。PS：前些天面试时遇到了这样一个问题：说一说DOMContentLoaded事件、onload事件和jq的ready事件，实际上是有所区别的，一篇博文就说说这个问题，先留个坑。

然后这个问题就解决掉了，下面就是完成功能了，要求按“+1”按钮时，数字+1；按“-1”按钮时，数字-1；

当然了，这个问题比较容易，了解下作用域和闭包就能写出来了，也给同学做了出来。HTML代码还是如上，下面是完整的JavaScript代码：

 window.onload = function() {

     var plus = document.getElementById('plus');

     var minus = document.getElementById('minus');

     var output = document.getElementById('output');

     var num=output.innerText;

     var count = function(event){

         var target=event.target;

          switch(target.id){

             case 'plus':

     　　　　　　num++;

     　　　　　　output.innerText=num;

             break;

             case 'minus':

     　　　　　　num--;

     　　　　　　output.innerText=num;

             break;

         }

     };

     document.addEventListener('click',count,false);

 }

最终运行效果如下：

JavaScript方法undefined/null原因探究及闭包简单实现的更多相关文章

  1. JavaScript 中undefined,null,NaN的区别

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...

  2. javascript的Undefined,null区别

    //在javascript中null表示“什么都没有” ,是一个特殊的类型,表示一个空对象引用: var person = null; //值为null(空),但类型为对象 console.log(p ...

  3. JavaScript：undefined!=false之解 及==比较的规则

    JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...

  4. javascript类型系统——undefined和null

    × 目录 [1]原因 [2]undefined [3]null 前面的话 一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这 ...

  5. JavaScript中undefined与null的区别

    通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...

  6. 【转】JavaScript中undefined与null的区别

    通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...

  7. 悟透Javascript undefined,null,"",0这四个值转换为逻辑值时就是false &this关键字

    话题一:undefined,null,"",0这四个值转换为逻辑值时就是false 也就是在if判断时会把上面的五个作为false来判断.但是它们的类型确是不尽相同的,如下所示. ...

  8. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  9. JavaScript的undefined与null、NaN的区别

    Javascript的数据类型 在JavaScript中,有三种住数据类型.两种复合数据类型和两种特殊数据类型. 1.主数据类型(基元数据类型) 字符串 String数据类型: 字符串值是一个由零个或 ...

随机推荐

  1. JQuery属性过滤(转)

    属性过滤(Attribute Filters)的内容就是html元素中的属性 其包括以下几个选择器: [attribute] [attribute=value] [attribute!=value] ...

  2. IBinder对象在进程间传递的形式(一)

    命题 当service经常被远程调用时,我们经常常使用到aidl来定一个接口供service和client来使用,这个事实上就是使用Binder机制的IPC通信.当client bind servic ...

  3. android 回调机制实例！

    详细实现为在类中定义接口.在接口的实现方法中传入參数(也能够不传). 在调用类中传入新建的接口.并实现未实现的方法. public class CallBackClass { //传入对应的接口作为參 ...

  4. [Angular 2] Managing State in RxJS with StartWith and Scan

    The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves ...

  5. Zend Studio 10正式版破解(2013-02-26更新)

    Zend Studio 10正式版注册破解(2013-02-26完成更新) 1.以下方法仅供技术交流学习,请勿非法使用,如长期使用请支持购买正版. 2.若你还没有最新安装程序? ZendStudio ...

  6. java中说明书/开发文档如何编写？

    由于在java开发时我们得到的或者给别人的文件一般都是class文件,不会给出源文件,故编写一个简洁易懂的说明书是必须的. ps: @param int[] arr 会有警告,可以删掉 int []. ...

  7. iTerm2和oh-my-zsh的个性化定制

    终于在某东做活动新入手了一台air,看身边小伙伴的mac的终端感觉好炫酷,于是乎准备自己也捯饬捯饬,google了一下,发现了osx平台上的终端神器iTerm2和用来代替bash的oh-my-zsh, ...

  8. 扩展欧几里德 POJ 1061

    欧几里德的是来求最大公约数的,扩展欧几里德,基于欧几里德实现了一种扩展,是用来在已知a, b求解一组x,y使得ax+by = Gcd(a, b) =d(解一定存在,根据数论中的相关定理,证明是用裴蜀定 ...

  9. NYOJ-571 整数划分(三)

    此题是个非常经典的题目,这个题目包含了整数划分(一)和整数划分(二)的所有情形,而且还增加了其它的情形,主要是用递归或者说是递推式来解,只要找到了递推式剩下的任务就是找边界条件了,我觉得边界也是非常重 ...

  10. GSON 简介 示例

    Gson简介 目前解析json最常用的三种工具:org.json(Java常用的解析),fastjson(阿里巴巴出的),Gson(Google出的),解析速度最快的是Gson. Gson的全名为Go ...