仅使用javascript移动框

我在html中有一个id=box，无法使用javascript用键盘上的箭头键移动该框，但代码只会向下移动。不在左边或右边。不确定我的代码是如何工作的

let boxTop = 200;
let boxLeft = 200;

document.getElementById("box").style.top = boxTop + "px";

document.addEventListener('keydown', logKey);

function logKey(ArrowUp) {
  box.style.top = (parseInt(box.style.top) - 10) + px';    
}

function logKey(ArrowRight) {
  box.style.left = (parseInt(box.style.left) + 10) + 'px';  
}

function logKey(ArrowLeft) {
  box.style.left = (parseInt(box.style.left) - 10) + 'px';    
}

function logKey(ArrowDown) {
  box.style.top = (parseInt(box.style.top) + 10) + 'px';    
}

---

您可以使用以下代码：

let boxTop = 200;
let boxLeft = 200;

document.getElementById("box").style.top = boxTop + "px";
document.getElementById("box").style.left = boxLeft + "px";
document.addEventListener('keydown', logKey);

function logKey(e) {
    switch(e.keyCode){
                        
         case 37:
             box.style.left = (parseInt(box.style.left) - 10) + 'px';
             break;
         case 38:
             box.style.top = (parseInt(box.style.top) - 10) + 'px';
             break;
         case 39:
             box.style.left = (parseInt(box.style.left) + 10)+'px';
             break;
         case 40:
             box.style.top = (parseInt(box.style.top) + 10) + 'px';
             break;
    }
}

问题是，你的函数记录键总是读取最后一个函数，你按下的每一个键，它都会下降

---

您可以试一试

问题是，为什么只有当用户按下箭头键时，框才会向下移动

一个好的开始是检查代码的每一行，并明确它正在做什么和您希望它做什么。我会在下面的评论中考虑一些事情，这样你就可以编辑你的代码，然后看看是否还有更多的工作要做。

    let boxTop = 200;
    let boxLeft = 200;// where is boxLeft used?
    
    document.getElementById("box").style.top = boxTop + "px";

框的位置-取决于位置：框的样式是相对于当前流还是固定的设备屏幕，但在这个阶段，您可能不需要考虑。

            document.addEventListener('keydown', logKey);

这将事件keydown绑定到函数logKey

但是，系统如何知道要使用哪些logKey函数呢？这里有4个这样的函数，JavaScript可能会转到它找到的第一个函数。您是否在控制台日志中看到错误？同一作用域中不能有多个同名函数

 function logKey(ArrowUp) {
ArrowUp will take on the value of whatever is passed to a function on an event. What is passed? And where in the function did you use this value?             

box.style.top = (parseInt(box.style.top) - 10) + px';
There is a typo here - a missing ' before the px. This function is therefore probably undefined - but there are 3 more so you may not have noticed as the system could pick up the next one. 

The next function is probably the one the system used when a key was pressed as the first instance was not valid. 
            function logKey(ArrowRight) {
              box.style.left = (parseInt(box.style.left) + 10) + 'px';  
            }

以下函数从未使用过，因为它们与上面的函数具有相同的名称

            function logKey(ArrowLeft) {
              box.style.left = (parseInt(box.style.left) - 10) + 'px';    
            }
            
            function logKey(ArrowDown) {
              box.style.top = (parseInt(box.style.top) + 10) + 'px';    
            }

基本上，当按下某个键时，您需要查看该键的值，并查看它是否为箭头之一，即，根据箭头键的值进行测试，您必须找出箭头键的值，并使用if语句或开关（例如）将其输入代码中。如果是，则按箭头键相应地重新定位长方体。如果它不是一个箭头键，那么你就忽略它

调试的一个非常好的方法是使用浏览器中的开发工具，例如，在Windows上右键单击if，查看控制台日志以查看错误，查看元素以查看有哪些代码，以及是否有突出显示为有错误的代码。您还可以添加

console.log(x);

---

语句，以便在运行时可以看到某些内容的实际值。例如，将console.logarrow向上放置；在您的logKey功能中，查看它提供了什么。

您是否尝试过按任何其他键，例如“A”，并注意到发生了什么？您正在任何按键上调用logKey函数，例如，请参阅Mozilla开发网络文档[link]，其中列出了可能的事件列表，其中概述了keydown事件的作用。似乎对给定代码中发生的事情有一些误解，我将发布一个答案，其中包含一些需要注意的事项。