Why this snake does not move?

Question

I have a web page with a snake that the user should control with buttons.

I used a for loop to bind the click event to the buttons. The move should happen in the if statement, but the snake does not move.

Why does it not work?

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>

[How to debug small programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) — Filburt, Mar 26 '23 at 08:17
Please create a [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) and also read [What is a debugger](https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) — derpirscher, Mar 26 '23 at 08:20
I turned your code into a runnable snippet, adding some minimal HTML/CSS. Please update it if needed. — trincot, Mar 26 '23 at 08:26
To those commenting about using a debugger. Please note that when you debug and inspect `x` it has the expected value, while `style.left` remains empty. This just confirms that the move is not happening. The question then still is "why?". This question does **not** need more debugging details. — trincot, Mar 26 '23 at 08:52
@trincot Well, but unless at least some html and css is shown, nobody knows, what for instance the `innerHTML` of the clicked button really is. Or if there even is at least one button selected by `document.querySelectorAll(".btns > button");` Or if the `snake` does have any particular styling that prevents `left` from getting effective ... So if one then discovers on debugging, that the eventhandler is indeed executed and the assignment is indeed happening, you can still ask "why doesn't the element move?". But until that is clear, it can have any reason ... — derpirscher, Mar 26 '23 at 15:58

score 2 · Answer 1 · answered Mar 26 '23 at 08:23

You have to add the unit of measure when defining style.left. Just a number is not enough. So add "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>

Why this snake does not move?

1 Answers1