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

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. hduTHE MATRIX PROBLEM(差分约束)

    题目请戳这里 题目大意:给一个n*m的矩阵,求是否存在这样两个序列:a1,a2...an,b1,b2,...,bm,使得矩阵的第i行乘以ai,第j列除以bj后,矩阵的每一个数都在L和U之间. 题目分析 ...

  2. sql为了实现转换的行列

    全名 学科 成绩 牛芬 语文 81 牛芬 数学 88 牛芬 英语 84 张三 语文 90 张三 数学 98 张三 英语 90 (表一) 现有一个表如(表一) 姓名 语文 数学 英语 牛芬 81 88 ...

  3. js window.open()弹出窗口参数说明及居中设置

    window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性. 最基本的弹出窗口代码 window.open('httP://codeo.cn/'); window.open()各参 ...

  4. 使用solr报错,错误信息 include(SolrClient.php): failed to open stream: No such file or directory

    这个是因为本地没有安装php-solr的扩展导致的,安装方法(使用的是ubuntu) cd /optwget http://pecl.php.net/get/solr-1.0.2.tgztar -xv ...

  5. cogs 1008 贪婪大陆

    /* 不要思维定视 盯着线段树维护l r 的ans不放 显然没法区间合并 换一种思路 如果打暴力的话 O(nm) 每次询问 扫一遍之前所有的修改 有交点则说明种数++ 接下来考虑如何优化 我们把每个区 ...

  6. Html.RenderPartial和Html.RenderAction的区别

    添加一个PartialController控制器 using System; using System.Collections.Generic; using System.Linq; using Sy ...

  7. ASP.NET-FineUI开发实践-9

    用了FineUI有一段时间了,还是分享下我咋改的吧,没想的那么难,我也是从小白来的. 基础是要懂JQ和EXTJS,主要是要懂JQ和EXTJS能干啥,这里有两个网站 http://www.w3schoo ...

  8. spring-qualifier解释

    如果一个class有两个对应的beanId,在Autowired的时候,必须指定Qualifier("指定其中一个beanId"). org.springframework.bea ...

  9. vmware桥接模式创建ubuntu虚拟机

  10. 学习WCF(1)

    1. 什么是WCF WCF是创建面向服务应用程序的一个框架,用WCF, 你可以发送异步消息. 一个服务的终结点可以是服务宿主在IIS上面,也可以是一个服务宿主在应用程序上面.一个终结点也可以是客户端的 ...