网页中按钮控制的蛇元素无法移动，请求排查原因

核心问题 #

蛇元素无法移动主要是两个原因：

• CSS属性值格式错误：snake.style.left需要带长度单位（比如px），你直接赋值纯数字，浏览器无法解析这个无效的样式值，所以元素位置不会变化。
• 逻辑顺序错误：每次点击按钮都会先执行x += 100，如果后续添加其他方向按钮（比如左、上、下），会导致x值被错误累加，逻辑不符合预期。

修正后的代码 #

JavaScript部分

const snake = document.querySelector(".snake");
const btns = document.querySelectorAll(".btns > button");
var x = 0;
var y = 0;

for (var i = 0; i < btns.length; ++i) {
  btns[i].addEventListener("click", function(e) {
    const btnText = e.target.innerHTML.trim();
    if(btnText === "right") {
        x += 100;
        snake.style.left = `${x}px`; // 添加px单位
    }
    // 可扩展其他方向逻辑
    // else if(btnText === "left") {
    //     x -= 100;
    //     snake.style.left = `${x}px`;
    // }
  });
}

CSS部分（无需修改）

.snake { display: inline-block; position: absolute; border: 1px solid }

HTML部分（无需修改）

<div class="btns"><button class="button">right</button></div>
<div class="snake">SNAKE</div>

额外说明 #

• 扩展其他方向移动时，记得给top/right/bottom属性也加上对应单位。
• 用let代替var可以避免循环变量的作用域问题，是更规范的写法。

内容的提问来源于stack exchange，提问作者user21449363