[英]Javascript: Why am I getting this Uncaught TypeError: Cannot read property 'addEventListener' of null?
我正在尝试注册一个事件处理程序，该事件处理程序在按钮触发click事件时将元素添加到DOM中，例如
var b = document.getElementById('evt');
var eventDemo = function(event) {
console.log('I handled the event');
console.log(event);
console.log(Object.prototype.toString.call(event));
var imgElement = document.createElement('img');
imgElement.src = 'http://lorempixel.com/150/150/';
document.body.appendChild(imgElement);
};
b.addEventListener('onclick', eventDemo, false);
但我不断得到：
未捕获的TypeError：无法读取null的属性'addEventListener'
为什么会这样
浏览器：chrome
正如你说script加载在head标签，由时的声明
var b = document.getElementById('evt');
执行后， DOM没有ID为evt元素。
使用DOMContentLoaded事件在元素上添加事件侦听器。 这将在DOM完全加载后运行。
当初始HTML文档已完全加载和解析时，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件。 完全不同的事件-加载-仅应用于检测页面已完全加载。 对于人们来说，使用负载是一个非常普遍的错误，而DOMContentLoaded更合适，因此要谨慎。
码：
document.addEventListener("DOMContentLoaded", function(event) {
var b = document.getElementById('evt');
b.addEventListener('click', eventDemo, false);
});
错误本身清楚地解释了！ 您没有任何ID为'evt'的html元素。 如果确定有一个ID为'evt'的元素，则使用$(document).ready ，如下所示，这样，在加载html元素时将执行您的js。
$(document).ready(function(){
var b = document.getElementById('evt');
var eventDemo = function(event) {
console.log('I handled the event');
console.log(event);
console.log(Object.prototype.toString.call(event));
var imgElement = document.createElement('img');
imgElement.src = 'http://lorempixel.com/150/150/';
document.body.appendChild(imgElement);
};
b.addEventListener('onclick', eventDemo, false);
});
在此脚本运行时，未定义ID为'evt'的元素。 有两种可能性：
script.js加载此脚本的，因此它可能发生在<head> 。 但是加载脚本时， <body>仍然没有。 将此脚本添加到页面底部，或者更好的方法是使用DOMContentLoaded事件：
document.addEventListener("DOMContentLoaded", function(event) {
//place all your code here
});
而且，正如已经提到的那样，该事件称为click ，而不是onclick 。 onclick是DOM属性，例如，等同于HTML中的addEventListener 。
如果您碰巧使用过jQuery，便捷的包装器是$(document).ready(function() { /* place hode here */ });
来自mdn
element = document.getElementById(id);
element是对Element对象的引用；如果具有指定ID的元素不在文档中，则为null 。
在您的情况下，找不到b并返回null。 Null不是对象，因此不能具有addEventListener
我遇到了同样的错误，我在同一天浪费了2天。 后来发现同一应用程序在firefox上运行良好。 所以我尝试将chrome版本更新为53.xx，现在没有发生此类问题。 也许这也会对您有帮助:)
为什么我无法读取 null javascript 的属性“addEventListener”
[英]why i am getting Cannot read property 'addEventListener' of null javascript
为什么我收到 null 的“无法读取属性”“addEventListener”
[英]Why am i getting 'Cannot read property 'addEventListener' of null
获取“未捕获的 TypeError：无法读取属性 'addEventListener' of null”
[英]Getting a "Uncaught TypeError: Cannot read property 'addEventListener' of null"
未捕获的TypeError：无法在JavaScript Webshare API中读取null的属性“ addEventListener”
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null in JavaScript webshare api
Javascript 错误：未捕获的类型错误：无法读取 null 的属性“addEventListener”
[英]Javascript Error: Uncaught TypeError: Cannot read property 'addEventListener' of null
为什么显示错误 Uncaught TypeError: “Cannot read property 'addEventListener' of null”？
[英]Why is it showing error Uncaught TypeError: “Cannot read property 'addEventListener' of null”?
未捕获的类型错误：无法读取 null 的属性“addEventListener”？
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null?
“未捕获的TypeError：无法读取null的属性'addEventListener'”
[英]“Uncaught TypeError: Cannot read property 'addEventListener' of null”
未捕获的类型错误：无法读取 null 的属性“addEventListener”
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null
未捕获的类型错误：无法读取 null 的属性 addEventListener
[英]Uncaught TypeError: Cannot read property addEventListener of null
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.