javascript - Unable to get property 'addEventListener' of undefined or null reference -

javascript - Unable to get property 'addEventListener' of undefined or null reference -

i need set image on canvas tag , give me error:

"unable property 'addeventlistener' of undefined or null reference"

please help me thanks

code:

html:

<div id="page"> <h2>template editor</h2> <div id="input"> <form> <p>select file: <input type='file' id="inputfile" name="inputfile" /></p> <p>load source file (*.bmp, *.jpg, *.tif, *.pdf)</p> </form> </div> <div id="menu"> <ul> <li><button><span>ocr</span></button></li> <li><button><span>icr</span></button></li> <li><button><span>omr</span></button></li> </ul> </div> <div id="canvasobj"> <canvas id="mycanvas"> browser not back upwards html5 canvas tag. </canvas> </div> </div>

javascript:

var imageloader = document.getelementbyid('inputfile'); imageloader.addeventlistener('change', handleimage, false); var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); function handleimage(e) { var reader = new filereader(); reader.onload = function (event) { var img = new image(); img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawimage(img, 0, 0); } img.src = event.target.result; } reader.readasdataurl(e.target.files[0]); }

try wrapping js this:

window.addeventlistener("load", function() { var imageloader = document.getelementbyid('inputfile'); imageloader.addeventlistener('change', handleimage, false); var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); function handleimage(e) { var reader = new filereader(); reader.onload = function (event) { var img = new image(); img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawimage(img, 0, 0); } img.src = event.target.result; } reader.readasdataurl(e.target.files[0]); } });

explaination: dom loaded after js , can hence not defined.

javascript canvas addeventlistener