I am trying to register an event handler that appends an element into the DOM when a button fires a click event,e.g.
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 = '/';
document.body.appendChild(imgElement);
};
b.addEventListener('onclick', eventDemo, false);
but I keep getting:
Uncaught TypeError: Cannot read property 'addEventListener' of null
Why is this happening
Browser: chrome
I am trying to register an event handler that appends an element into the DOM when a button fires a click event,e.g.
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./150/150/';
document.body.appendChild(imgElement);
};
b.addEventListener('onclick', eventDemo, false);
but I keep getting:
Uncaught TypeError: Cannot read property 'addEventListener' of null
Why is this happening
Browser: chrome
evt id don't exists
– Tushar
Commented
Jul 7, 2015 at 16:25
b contains null.
– Pointy
Commented
Jul 7, 2015 at 16:26
evt. script is loaded from file script.js. tried click but read somewhere that chrome doesnt support click?
– the_velour_fog
Commented
Jul 7, 2015 at 16:28
script.js added in head tag
– Tushar
Commented
Jul 7, 2015 at 16:28
As you've said that script is loaded in head tag, by the time when the statement
var b = document.getElementById('evt');
is executed, there is no element in the DOM having id evt.
Use DOMContentLoaded event to add event listeners on element. This will run after the DOM is pletely loaded.
The DOMContentLoaded event is fired when the initial HTML document has been pletely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake for people to use load where DOMContentLoaded would be much more appropriate, so be cautious.
Code:
document.addEventListener("DOMContentLoaded", function(event) {
var b = document.getElementById('evt');
b.addEventListener('click', eventDemo, false);
});
The error itself clearly explains! You don't have any html element with the id 'evt'. If you are sure you have an element with id 'evt', then use $(document).ready as given below, so that, your js gets executed when the html elements are loaded.
$(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./150/150/';
document.body.appendChild(imgElement);
};
b.addEventListener('onclick', eventDemo, false);
});
At the point when this script runs, the element with id 'evt' is not defined. There are two possibilities:
script.js, so it probably happens in <head>. But when the script is loaded, the <body> still isn't.Either add this script at the bottom of the page, or, better, use the DOMContentLoaded event:
document.addEventListener("DOMContentLoaded", function(event) {
//place all your code here
});
And, as somebody already mentioned, the event is called click, not onclick. The onclick is a DOM property, say, an equivalent in HTML to addEventListener.
Should you ever happen to use jQuery, the convenient wrapper is $(document).ready(function() { /* place hode here */ });
From mdn
element = document.getElementById(id);
element is a reference to an Element object, or null if an element with the specified ID is not in the document.
In your case b is not found and returning null. Null is not an object so it cannot have addEventListener
I was getting the same kind of error and I wasted my 2 days on the same. Later found out that the same application was working fine on firefox. So I tried updating my chrome version to 53.x.x And now no such issue is occurring. Maybe this will help you too :)