使用JavaScript增加元素位置的问题

我之前的一段经历让我构建了下面的代码。我试图做的是根据键盘箭头选择向上/向下/左/右递增元素

"<div id="test"></div>"

#测试{
位置：相对位置；
宽度：30px；
边框：1px纯蓝色；
高度：10px；
顶部：0px；
左：0px；
}

---

在CSS中设置前，您需要对top和left进行算术：）

---

这里有一个有用的工具：

2个问题：您更新globals太晚了，只需在元素上使用它之前完成即可。并且变量名“top”是保留的，只需使用另一个（请参阅）。代码如下：

document.addEventListener（“按键向下”，键盘输入）；
左向量=0；
var-topx=0；
函数moveUp（）{
console.log（'moveUp'）；
topx-=20；
document.getElementById（“test”）.style.top=topx+“px”；
document.getElementById（“test”）.style.transition=“所有1”；
};
函数moveDown（）{
console.log（'moveDown'）；
topx+=20；
document.getElementById（“test”）.style.top=topx+“px”；
document.getElementById（“test”）.style.transition=“所有1”；
};
函数moveLeft（）{
console.log（'moveLeft'）；
左-=20；
document.getElementById（“test”）.style.left=left+px；
document.getElementById（“test”）.style.transition=“所有1”；
};
函数moveRight（）{
console.log（'moveRight'）；
左+=20；
document.getElementById（“test”）.style.left=left+px；
document.getElementById（“test”）.style.transition=“所有1”；
};
函数键盘输入（）{
var i=event.keyCode；
如果（i==38）{
上移
};
如果（i==40）{
向下移动（）
};
如果（i==37）{
左移（）
};
如果（i==39）{
moveRight（）
};
};
#测试{
位置：相对位置；
宽度：30px；
边框：1px纯蓝色；
高度：10px；
顶部：0px；
左：0px；
}
是的，这很有意义！非常感谢您，现在就开始测试代码吧！谢谢你的邀请！我没有意识到“top+=20；必须放在第一位，有人在你之前回答，所以他们得到了复选标记，但是你的示例也很好！谢谢
function moveUp() {
  console.log('moveUp');
  top -= 20;
  document.getElementById("test").style.top = top + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  top += 20;
  document.getElementById("test").style.top = top + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  left -= 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  left += 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};