我收到一条错误消息:
Uncaught TypeError: Cannot read property 'addEventListener' of null,
我正在尝试制作一个包含披萨图像的拖放游戏，但我正在努力将任何内容拖放到 HTML 上的任何位置。当我为它创建 HTML 时，我不明白为什么我的 addEventListener 为 null。
这是我到目前为止的代码:
<html>
<body>
<div id="outerContainer">
<div id="container">
<div id="item">
</div>
</div>
</div>
</body>
</html
<script>
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
最佳答案
您应该尝试将 javascript 代码放入函数中，并在 onload 事件上调用该函数。这是为了确保在执行 JavaScript 时加载 DOM。
<html>
<body onload="init()">
<div id="outerContainer">
<div id="container">
<div id="item">
</div>
</div>
</div>
</body>
</html>
<script>
function init() {
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
}
</script>
关于javascript - 我的拖放功能不起作用。我收到类型错误。这是什么意思？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58964574/