document.addEventListener("keydown",myFunction)失效，WASD控制Div移动无响应

你的代码存在三个关键问题导致移动功能失效，以下是修正方案：

问题分析 #

• 语法错误：W键的判断用了赋值运算符=而非比较运算符==，导致这个分支始终触发，同时覆盖了按键值，逻辑完全混乱。
• 元素定位缺失：默认position: static的元素，top和left样式属性不会生效，必须设置为absolute、relative或fixed。
• 坐标更新顺序错误：当前代码先设置样式再更新坐标，第一次按键时元素不会产生移动（比如按S键，先设置top:0px，再把yAxis改成1，第二次按才会生效）。

修正后的代码 #

首先给目标元素添加定位样式（CSS部分）：

#testDiv {
  position: absolute; /* 或relative/fixed，根据布局需求选择 */
  width: 50px;
  height: 50px;
  background-color: #000; /* 方便观察元素位置 */
}

然后修改JS代码：

let yAxis = 0;
let xAxis = 0;

const test = document.getElementById("testDiv");
document.addEventListener("keydown", myFunction);

function myFunction(event) {
  const k = event.key.toLowerCase(); // 兼容大小写输入
  event.preventDefault(); // 阻止页面滚动等默认按键行为

  if (k === "s") {
    yAxis += 1;
    test.style.top = `${yAxis}px`;
  } else if (k === "d") {
    xAxis += 1;
    test.style.left = `${xAxis}px`;
  } else if (k === "a") {
    xAxis -= 1;
    test.style.left = `${xAxis}px`;
  } else if (k === "w") {
    yAxis -= 1;
    test.style.top = `${yAxis}px`;
  } else {
    document.getElementById("testY").innerText = "Use 'w','s','a' and 'd'. ";
  }
}

关键修改说明 #

1. 把W键判断的k="w"改成k==="w"（严格相等判断更严谨）
2. 给testDiv设置position: absolute，确保top/left属性生效
3. 调整顺序：先更新坐标值，再设置元素样式，第一次按键就能看到移动效果
4. 添加event.preventDefault()避免按键触发页面滚动等干扰行为
5. 用toLowerCase()兼容大小写输入，用户按大写W也能触发上移

内容的提问来源于stack exchange，提问作者The Junkmania.c