昨天一个刚写前端不久的同学发消息问这个问题(如下图):

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. 跟Google学习Android开发-起始篇-用碎片构建一个动态的用户界面(3)

    4.3 构建一个灵活的用户界面 当设计你的应用程序要支持大范围的屏幕尺寸时,你可以在不同的布局配置中重用碎片,来根据可用的屏幕空间优化用户体验. 例如,在手持设备上,它可能是适应来在一个单窗格用户界面 ...

  2. Install Oracle 10g on Red Hat Linux 5.3 Step by Step

    一.虚拟机配置 1. 虚拟机(VBox 4.3.12) 2. 配置虚拟机网卡网络.选择host-only.VirtualBox Host-Only Network网卡IP为设置为192.168.1.1 ...

  3. [Angular 2] ngrx/store

    @ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...

  4. android系统360浏览器使用append动态添加元素出现黑色错乱背景

    去掉样式 backface-visibility:hidden;

  5. tomcat startup.sh提示java.lang.OutOfMemoryError: PermGen space

    JAVA_OPTS="-server -XX:PermSize=512M -XX:MaxPermSize=1024m"if [ -z "$LOGGING_MANAGER& ...

  6. (转)委托的N种写法,你喜欢哪种?

    原文:http://www.cnblogs.com/FreeDong/archive/2013/07/31/3227638.html 一.委托调用方式 1. 最原始版本: delegate strin ...

  7. java中保留几位小数

    public class NumUtils { /** * 保留两位小数 * * @param d * @return */ public static String get2Wei(double d ...

  8. 用POP动画引擎实现弹簧动画(POPSpringAnimation)

    效果图: #import "ViewController.h" #import <POP.h> @interface ViewController () @proper ...

  9. DWZ简介及其使用

    来源:http://blog.csdn.net/t123012009065/article/details/8286826 DWZ简介:   DWZ富客户端框架(jQuery RIA framewor ...

  10. redux-simple 简化版的redux

    作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...