Javascript 无法获取属性'；增补列表器'；指未定义的或空的引用

我需要将图像放在画布标记上，并始终向我提供以下错误：

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

请帮帮我谢谢

代码：

HTML:

---

尝试像这样包装您的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之后加载，因此无法定义。

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

• 将脚本引用移动到

• 使用

  document.getElementByID

---

您的Javascript何时运行？在DOM准备好之后？很明显，

getElementById（'inputFile'）

没有找到您的元素。代码运行时它是否存在？它是否具有

id

属性。

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

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