无法获取未定义或空引用的属性“addEventListener”[重复]答案

【问题标题】：Unable to get property 'addEventListener' of undefined or null reference [duplicate]无法获取未定义或空引用的属性“addEventListener”[重复]
【发布时间】：2014-06-18 15:11:49
【问题描述】：

我需要在画布标签上放一张图片，并且总是给我这个错误：

“无法获取未定义或空引用的属性‘addEventListener’”

请帮帮我，谢谢

代码：

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]);
}

【问题讨论】：

您的 Javascript 什么时候运行？ DOM 准备好之后？
getElementById('inputFile') 没有找到您的元素似乎很明显。代码运行时是否存在？它是否具有id 属性。

标签： javascript canvas addeventlistener

【解决方案1】：

尝试像这样包装你的 JS：

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]);
    }
});

说明：DOM是在JS之后加载的，所以不能定义。

【讨论】：

【解决方案2】：

这些帮助解决了我的问题：

将您的脚本引用移到<body> 的末尾
确保在使用 document.getElementByID 调用 Element ID 时没有拼写错误

【讨论】：