CODEWITHSUNDEEP
javascriptgoogle-chrome
the_velour_fog
the_velour_fog

Reputation: 2184

Javascript: Why am I getting this Uncaught TypeError: Cannot read property 'addEventListener' of null?

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.com/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

Upvotes: 0

Views: 22896

Answers (5)

sameepsi
sameepsi

Reputation: 307

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 :)

Upvotes: 0

Liglo App
Liglo App

Reputation: 3819

At the point when this script runs, the element with id 'evt' is not defined. There are two possibilities:

  1. You misspelled the id or forgot to add it, double-check it
  2. You load this code before the page gets rendered. You say, you load this script from 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 */ });

Upvotes: 1

Hari Ram
Hari Ram

Reputation: 305

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.com/150/150/';
document.body.appendChild(imgElement);

};

b.addEventListener('onclick', eventDemo, false);
});

Upvotes: 2

Tushar
Tushar

Reputation: 87203

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 completely loaded.

The DOMContentLoaded event is fired when the initial HTML document has been completely 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);
});

Upvotes: 5

Nathanael Smith
Nathanael Smith

Reputation: 3311

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

Upvotes: 0

Related Questions