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

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. SKPhysicsBody类

    继承自 NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit.framewo ...

  2. NSURLConnection获取数据

    - (void)loadDataFromUrl { NSURL* url = [NSURL URLWithString:@"http://m.weather.com.cn/data/1011 ...

  3. HDU1247 Hat’s Words 【trie树】

    Hat's Words Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  4. TinyXml快速入门（二）

    在<TinyXml快速入门(一)>中我介绍了使用TinyXml库如何创建和打印xml文件,下面我介绍使用tinyxml库对xml文件进行一系列的操作,包括获取xml文件声明,查询指定节点. ...

  5. C# string.Format谨慎使用

    string.Format string.Format在处理文本的时候很有用处,但是在使用占位符的时候一定要注意内容中的特殊字符{}. 示例 string.Format("你好{0},这是{ ...

  6. Android 连接Wifi和创建Wifi热点 demo

    android的热点功能不可见,用了反射的技术搞定之外. Eclipse设置语言为utf-8才能查看中文注释 上代码: MainActivity.java package com.widget.hot ...

  7. JAVA - 回调机制

    参考例子:android的Button OnClickListener接口.<第一行代码>中的回调例子   定义接口 public interface HttpCallbackListen ...

  8. MM32初识(兼容STM32)

    MM32初识(兼容STM32) 资源与开发环境 keil 5.0 MM32 miniboard 提要 stm32入门(MM32兼容) 点亮LED思路简介 GPIO配置 stm32寄存器理解与操作步骤 ...

  9. 【网络流#9】POJ 2135 Farm Tour 最小费用流 - 《挑战程序设计竞赛》例题

    [题意]给出一张无向图,从1开始到n,求两条没有公共边的最短路,使得路程总和最小 每条边的权值设为费用,最大流量设为1,然后就是从源点到汇点流量为2的最小费用流. 因为是规定了流量,新建一个源点和一个 ...

  10. JNI 详细使用步骤 上手示例

    1.定义本地native方法 定义本地方法,通常情况下,应单独定义一个类来封装所有native方法 /** 存放native方法的类 */ public class MyNativeMethods { ...