Javascript 为什么我总是得到；无法调用方法'；增补列表器'；是否为空；？

我在webdev方面非常缺乏经验，但我正在制作一个网站。Im使用stackoverflow的答案和脚本，以便用户可以将图像从一个div拖到画布中。当我测试它时，我总是得到错误“不能调用null的方法'addEventListener'。我猜这意味着无论脚本试图加载什么，它都没有加载，因此将其保留为null。控制台在我的JS文件的第77行（canvasContainer.addEventListener（'dragenter'，靠近底部）显示它。我已经尝试将导入脚本代码向下移动（在主体下），以便它在加载其他所有内容之后加载，但仍然不起作用。有什么想法吗

另外，javascript来自natchiketa

HTML:

JavaScript:

var canvas = new fabric.Canvas('Canvas');

function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); 
    }
    e.dataTransfer.dropEffect = 'copy';
    return false;
}

function handleDragEnter(e) {
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over');
}

function handleDrop(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    var img = document.querySelector('#images img.img_dragging');

    console.log('event: ', e);

    var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

function handleDragEnd(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
}

if (Modernizr.draganddrop) {
    var images = document.querySelectorAll('#images img');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });
    var canvasContainer = document.getElementById('CanvasDiv');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

---

看起来您只需要将部分代码包装到document.ready处理程序中，如下所示

$(function() {
    if (Modernizr.draganddrop) {
        var images = document.querySelectorAll('#images img');
        [].forEach.call(images, function (img) {
            img.addEventListener('dragstart', handleDragStart, false);
            img.addEventListener('dragend', handleDragEnd, false);
        });
        var canvasContainer = document.getElementById('CanvasDiv');
        canvasContainer.addEventListener('dragenter', handleDragEnter, false);
        canvasContainer.addEventListener('dragover', handleDragOver, false);
        canvasContainer.addEventListener('dragleave', handleDragLeave, false);
        canvasContainer.addEventListener('drop', handleDrop, false);
    } else {
        alert("This browser doesn't support the HTML5 Drag and Drop API.");
    }
});

---

document.getElementById（“CanvasDiv”）

不会返回元素，因为当时没有加载文档，但接下来的几行预期会有一些内容。将其包装到文档中。ready事件处理程序应该可以解决此问题，因为DOM将在您尝试引用它时加载。

看起来您只需要在do中包装部分代码cument.ready处理程序，像这样

$(function() {
    if (Modernizr.draganddrop) {
        var images = document.querySelectorAll('#images img');
        [].forEach.call(images, function (img) {
            img.addEventListener('dragstart', handleDragStart, false);
            img.addEventListener('dragend', handleDragEnd, false);
        });
        var canvasContainer = document.getElementById('CanvasDiv');
        canvasContainer.addEventListener('dragenter', handleDragEnter, false);
        canvasContainer.addEventListener('dragover', handleDragOver, false);
        canvasContainer.addEventListener('dragleave', handleDragLeave, false);
        canvasContainer.addEventListener('drop', handleDrop, false);
    } else {
        alert("This browser doesn't support the HTML5 Drag and Drop API.");
    }
});

---

document.getElementById（“CanvasDiv”）

不会返回元素，因为当时没有加载文档，但接下来的几行预期会有一些内容。将其包装到文档中。ready事件处理程序应该可以解决此问题，因为DOM将在您尝试引用它时加载。

在加载文档之前无法获取元素…

   window.addEventListener('loaded', function(){
       if (Modernizr.draganddrop) {
           var images = document.querySelectorAll('#images img');
           [].forEach.call(images, function (img) {
               img.addEventListener('dragstart', handleDragStart, false);
               img.addEventListener('dragend', handleDragEnd, false);
           });
           var canvasContainer = document.getElementById('CanvasDiv');
           canvasContainer.addEventListener('dragenter', handleDragEnter, false);
           canvasContainer.addEventListener('dragover', handleDragOver, false);
           canvasContainer.addEventListener('dragleave', handleDragLeave, false);
           canvasContainer.addEventListener('drop', handleDrop, false);
       } else {
           alert("This browser doesn't support the HTML5 Drag and Drop API.");
       }
     });

---

在加载文档之前无法获取元素

   window.addEventListener('loaded', function(){
       if (Modernizr.draganddrop) {
           var images = document.querySelectorAll('#images img');
           [].forEach.call(images, function (img) {
               img.addEventListener('dragstart', handleDragStart, false);
               img.addEventListener('dragend', handleDragEnd, false);
           });
           var canvasContainer = document.getElementById('CanvasDiv');
           canvasContainer.addEventListener('dragenter', handleDragEnter, false);
           canvasContainer.addEventListener('dragover', handleDragOver, false);
           canvasContainer.addEventListener('dragleave', handleDragLeave, false);
           canvasContainer.addEventListener('drop', handleDrop, false);
       } else {
           alert("This browser doesn't support the HTML5 Drag and Drop API.");
       }
     });

---

也许吧，虽然他确实说过他把脚本移到了

的结尾，但没有任何改进。我爱你！！我有过这样的挫折感，我相信每个写代码的人都有过。这解决了问题，谢谢！；@user2961869如果这解决了问题，然后把你的剧本移到身体的末端也会解决这个问题。奇怪，也许我做错了什么。。。现在我遇到了一个新问题，它说“var newImage=newfabric.Image（img，{width:img.width，height:img.height，left:e.layerX，top:e.layerY}”）；”在handeldrop（e）下，它说“无法读取null的属性'width'。有什么线索吗？@user2961869是一个id

images

由代码生成的元素？否则，你的选择器就错了……也许吧，尽管他说他把脚本移到了

结尾，但没有任何改进。我爱你！！我确信每个编写代码的人都会感到沮丧。这就解决了问题，谢谢！；）@user2961869如果这解决了问题，那么将脚本移到正文末尾也会解决问题。奇怪，也许我做错了什么。。。现在我遇到了一个新问题，它说“var newImage=newfabric.Image（img，{width:img.width，height:img.height，left:e.layerX，top:e.layerY}”）；”在handeldrop（e）下，它说“无法读取null的属性'width'。有什么线索吗？@user2961869是一个id

images

由代码生成的元素？否则，您的选择器是错误的…@canon“我尝试将导入脚本代码向下移动（在正文下），以便在其他所有内容之后加载，但仍然不起作用。”@canon“我尝试将导入脚本代码向下移动（在正文下），以便在其他所有内容之后加载，但仍然不起作用。”

'loaded'

真的有效吗？这可能是

'load'

。

'load'

真的有效吗？这应该是

“加载”

。