javascript 为什么这条蛇不动?[关闭]

oiopk7p5  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(82)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
昨天关门了。
社区正在审查是否从昨天开始重新讨论这个问题。
Improve this question
我有一个网页与蛇,用户应该控制按钮。
我使用了一个for循环将click事件绑定到按钮,移动应该在if语句中发生,但是snake没有移动。
为什么不管用?

const squares = document.querySelectorAll(".square");
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) {
    x += 100;
    if(e.target.innerHTML.trim() === "right") {
        snake.style.left = x;
    }
  });
}
.snake { display: inline-block; position: absolute; border: 1px solid }
<div class="btns"><button class="button">right</button></div>
<div class="snake">SNAKE</div>
rryofs0p

rryofs0p1#

在定义style.left时,必须添加度量单位。仅仅一个数字是不够的。因此添加“px”:

const squares = document.querySelectorAll(".square");
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) {
    x += 100;
    if(e.target.innerHTML.trim() === "right") {
        snake.style.left = x + "px";
    }
  });
}
.snake { display: inline-block; position: absolute; border: 1px solid }
<div class="btns"><button class="button">right</button></div>
<div class="snake">SNAKE</div>

相关问题