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

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. git小技巧--提取/合并某分支的部分文件

    软件开发基本都是多个feature分支并行开发,而在上线前有可能某个分支的开发或测试还没有完成,又或者是产品调整,取消了该分支功能的上线计划,我们在release前不合并该分支即可,然而如果该分支中的 ...

  2. eclipse中新建maven项目

    maven是个项目管理工具,集各种功能于一身,下面介绍maven web项目在eclipse种的配置,并于tomcat集成.配置成功后,可以跟一般的web项目一样调试. 一.准备条件 1.安装下载jd ...

  3. Android的图片压缩类ThumbnailUtils

    从Android 2.2开始系统新增了一个缩略图ThumbnailUtils类,位于framework包下的android.media.ThumbnailUtils位置,可以帮助我们从mediapro ...

  4. mvc和webapi同一解决方案调试办法

    今天在研究WebApi的时候,用mvc端直接请求webapi接口,发现怎么也请求不了,自己搞了半天,猜测可能是webapi没有完全启动吧,解决办法是将解决方案属性改为多启动项目,具体方法如下: 直接运 ...

  5. 【转】解决警告 warning: directory not found for option

    转:http://blog.sina.com.cn/s/blog_6f72ff900101es6x.html 解决方法: 选择项目名称----->Targets----->Build Se ...

  6. android常用http框架介绍

    测试数据 1.HttpURLConnection:在Android 2.2版本之前,HttpClient拥有较少的bug,因此使用它是最好的选择.而在Android 2.3版本及以后,HttpURLC ...

  7. java的练习

    import java.awt.GridLayout; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.s ...

  8. Examples_08_04

  9. [php基础]记录PHP错误日志 display_errors与log_errors的区别

    display_errors 错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. display ...

  10. Android开发手记(14) 使用MediaPlayer播放mp3

    1.获取MediaPlayer实例 (1)可以直接通过new或者create方式: 调用setDataSource和create的区别是,create时已经执行了MediaPlayer.prepare ...