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

Question

I need to put a image on a canvas tag and always give me this error:

"Unable to get 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 a 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">
            Your browser does not support the 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]);
}

It would seem pretty clear that `getElementById('inputFile')` is not finding your element. Does it exist when the code runs? Does it have that `id` attribute. — cookie monster, Jun 18 '14 at 15:16

score 1 · Answer 1 · answered Jun 19 '14 at 14:59

Try wrapping your JS like 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 is loaded after the JS and can therefore not be defined.

score -1 · Answer 2 · answered Jul 28 '18 at 09:41

-1

These helped fix my issue:

Move your script reference at the end of your <body>
Make sure you don't have a typo on calling your Element ID using document.getElementByID

answered Jul 28 '18 at 09:41

Willy David Jr

6,916
3
34
45

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

2 Answers2