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

i trying register event handler appends element dom when button fires click event,e.g.

var b = document.getelementbyid('evt');  var eventdemo = function(event) {      console.log('i handled 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 keep getting:

uncaught typeerror: cannot read property 'addeventlistener' of null

why happening

browser: chrome

as you've said script loaded in head tag, time when statement

var b = document.getelementbyid('evt'); 

is executed, there no element in dom having id evt.

use domcontentloaded event add event listeners on element. run after dom loaded.

the domcontentloaded event fired when initial html document has been loaded , parsed, without waiting stylesheets, images, , subframes finish loading. different event - load - should used detect fully-loaded page. incredibly popular mistake people use load domcontentloaded more appropriate, cautious.

code:

document.addeventlistener("domcontentloaded", function(event) {     var b = document.getelementbyid('evt');     b.addeventlistener('click', eventdemo, false); });