我的拖放 function 不起作用。 我收到一个类型错误。 这是什么意思？
[英]My drag and drop function isn't working. I'm getting a TypeError. What does this mean?
问题描述
I'm getting an error stating:
我收到一条错误消息：
Uncaught TypeError: Cannot read property 'addEventListener' of null,
I'm trying to make a drag and drop game with pizza images and I'm struggling to get anything to drag and drop anywhere on my HTML.我正在尝试使用披萨图像制作拖放游戏，但我正在努力让任何东西拖放到我的 HTML 上的任何位置。 I can't figure out why my addEventListener is null when I created an HTML for it.当我为它创建 HTML 时，我无法弄清楚为什么我的addEventListener是 null。
This is the code I have so far:这是我到目前为止的代码：
<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);
1 个解决方案
解决方案1
1 2019-11-21 04:16:45
You should try putting the javascript code in a function and call that function on onload event.您应该尝试将 javascript 代码放入 function 并在 onload 事件中调用 function。 This is to make sure that the DOM is loaded when the javascript gets executed.这是为了确保在执行 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.