Javascript 我试图通过点击按钮创建元素，移动现有元素的位置，但它不起作用_Javascript_Positioning_Createelement

Javascript 我试图通过点击按钮创建元素，移动现有元素的位置，但它不起作用

javascript

Javascript 我试图通过点击按钮创建元素，移动现有元素的位置，但它不起作用,javascript,positioning,createelement,Javascript,Positioning,Createelement,当我运行它并单击运行函数shot的按钮时，它说它无法读取未定义的属性“style”。它还会在它将生成的位置上生成一个新元素，而无需定义任何位置。是的，我的身份证是正确的 Html: 这里是完整的项目JS，你不需要。它还不完整。有一个按钮更快，但它不工作，idk为什么。应该是射箭比赛 #arrow { background-color: black; height: 80px; width: 1.5px; position: relative; left: 0px; top: 0px; } v

当我运行它并单击运行函数shot的按钮时，它说它无法读取未定义的属性“style”。它还会在它将生成的位置上生成一个新元素，而无需定义任何位置。是的，我的身份证是正确的

Html:

这里是完整的项目JS，你不需要。它还不完整。有一个按钮更快，但它不工作，idk为什么。应该是射箭比赛

#arrow {
background-color: black;
height: 80px;
width: 1.5px;
position: relative;
left: 0px;
top: 0px;
}

var-arrow=document.getElementById（“arrow”）；
var-arrowPos=-50；
无功转速=1000；
var speed2=速度/100；
函数箭头\移动\右（）{
arrowPos+=1；
arrow.style.left=箭头位置+“px”；
如果（箭头位置>=280）{
返回箭头\向左移动\向左（）
}
否则{
设置超时（箭头向右移动，速度2）；
};
};
功能箭头\向左移动\向左（）{
arrow=document.getElementById（“arrow”）；
arrowPos-=1；
arrow.style.left=箭头位置+“px”；
如果（arrowPos这就是我的意思

var-arrow=document.getElementById（“arrow”）；
函数快照（）{
var arrows=document.createElement（“div”）；
document.body.appendChild（箭头）；
arrows.style.backgroundColor=“黑色”；
arrows.style.height=“80”+“px”；
arrows.style.width=“3”+“px”；
var arrowX=parseInt（arrow.style.left）；
var arrowY=parseInt（arrow.style.top）；
arrows.style.left=箭头x+“px”；
arrows.style.top=arrowY+“px”；
}；

页面标题
射击
希望这就是你想要的

var-arrow=document.getElementById（“arrow”）；
函数快照（）{
var arrows=document.createElement（“div”）；
document.body.appendChild（箭头）；
arrows.style.backgroundColor=“蓝色”；
arrows.style.height=“80px”；
arrows.style.width=“3px”；
arrows.style.position=“绝对”；
arrows.style.top=arrow.offsetTop+“px”；
arrows.style.left=arrow.offsetLeft+“px”；
}；
#箭头{
高度：80px；
宽度：3倍；
背景：黑色；
位置：相对位置；
-webkit动画：移动5s无限；/*Safari 4.0-8.0*/
动画：移动5s无限；
}
/*为箭头设置动画的样式*/
/*Safari 4.0-8.0*/
@-webkit关键帧移动{
从{左：0px；}
到{左：400px；}
}
@关键帧移动{
从{左：0px；}
到{左：400px；}
}

Shot！
什么是document.arrow
？它是未定义的元素你是说只有arrow吗？arrow是我用getElementByIduse onlyarrow
而不是document.arrow
和arrows
而不是document.arrows得到的var存储元素，现在它说它不能得到null样式而不是未定义的…No不是吗？粘贴完整代码。您必须做了其他操作。因为它在此处工作否，它应该在与元素“arrow”相同的位置创建元素上面的代码片段在与元素“arrow”相同的位置创建元素。如果这不是您想要的，您可以准确地解释单击“Shot”时应该发生的情况按钮。我需要它在箭头的当前位置创建元素，因为它将移动。因此它应该找到箭头的位置并在其上创建元素1。它不起作用。它表明它无法读取null的属性offsettop。2.我有我的移动动画。我只需要创建元素的东西。您是否可以发布你的动画还是它的链接？因为上面的代码片段工作得很好。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="arrow"><div>
<button id="button" onclick="shot();"> Shot! </button>
</body>
</html>

#arrow {
background-color: black;
height: 80px;
width: 1.5px;
position: relative;
left: 0px;
top: 0px;
}

var arrow = document.getElementById("arrow");
var arrowPos = -50;
var speed = 1000;
var speed2 = speed/100;
function arrow_move_right() {

arrowPos += 1;
arrow.style.left = arrowPos + "px";
if (arrowPos >= 280) {
    return arrow_move_left()
}
else {
setTimeout(arrow_move_right, speed2);
};
};
function arrow_move_left() {
arrow = document.getElementById("arrow");
arrowPos -= 1;
arrow.style.left = arrowPos + "px";
if (arrowPos <= -50) {
    return arrow_move_right()
}
setTimeout(arrow_move_left, speed2);
};
function faster() {
speed -= 100;
alert(speed)
}

function shot() {
var arrows = document.createElement("div");
document.body.appendChild(arrows);
arrows.style.backgroundColor = "black";
arrows.style.height = "80" + "px";
arrows.style.width = "1.5" + "px";
var arrowX = parseInt(arrow.style.left);
var arrowY = parseInt(arrow.style.top);
alert(arrowX);
alert(arrowY);
// arrows.style.left = arrowX; 
// arrows.style.top = arrowY;
arrows.style.pos = "relative";
arrows.style.top = -50 + "px";
};