为何点击左按钮后setInterval无法驱动snake元素左移？

你的左移功能失效核心有两个关键问题：

1. 定位属性混用 #

右移时你修改的是style.left，但左移错误地改成了style.right——这两个属性同时作用会让浏览器的定位计算逻辑混乱，导致元素无法正确左移。应该统一用left属性控制水平位置，左移时只需要减少X的值，再更新style.left即可。

2. 缺少CSS长度单位 #

设置style.left时你只传了数字X，但CSS的长度属性必须带单位（比如px），否则浏览器无法识别该值，直接导致样式不生效。

另外还有个小笔误：定时器变量名intervallefttId多打了一个t，改成intervalleftId才能保证后续清除定时器时不出问题。

修复后的完整代码 #

const snake = document.querySelector(".box");
const btns = document.querySelectorAll(".btns > button");
var X = 0;
var intervalrightId;
var intervalleftId; // 修正变量名

btns.forEach((btn) => {
    btn.addEventListener("click", function(e) {
        if (e.target.textContent == "right") {
            if (intervalleftId) {
                clearInterval(intervalleftId)
            }

            intervalrightId = setInterval(() => {
                X += 100;
                snake.style.left = X + 'px'; // 添加px单位
            }, 500)
        }

        if (e.target.textContent == "left") {
            if (intervalrightId) {
                clearInterval(intervalrightId)
            }

            intervalleftId = setInterval(() => {
                X -= 100;
                snake.style.left = X + 'px'; // 统一使用left属性并添加单位
            }, 500)
        }
    })
})

额外注意 #

如果你的.box元素没有设置position: relative/absolute/fixed，left属性是不会生效的，记得在CSS里补充定位规则：

.box {
    position: absolute; /* 也可以用relative，根据你的布局需求选择 */
}

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