Code stops working when I change the EventListener from "click" to "keydown"

Question

The piece of code below sucessfully manages to change the position of a block within a grid when you click on it ( on the grid ).

However , I intend to do it when I press on a key. It happens that when I change the EventListener from "click" to "keydown" I get no response if I press on any key of my laptop while running the script.

I assume something is wrong with the element (I need to focus it? How ?) , or the document somehow is unable to recognize the key input. What can I do to try fix this problem ?

let x = 5;
let y = 5;

function CreateSnake(){
  tabuleiro.appendChild(snake);
   snake.style.gridColumnStart = x;
   snake.style.gridRowStart = y;

   snake.classList.add("snake");
  };

  tabuleiro.addEventListener("click" , function(){
      moveSnakeRight();
      remove()
    });

function moveSnakeRight(){
  if ( x < 10)
  console.log(x++)
;
}

function remove(){
  snake.remove()
}

Answer 1

My guess is that you've got the keydown event listener on the wrong element. In order to handle the keydown event, the element must be able to receive focus (setting tabindex). See the following demo: https://jsfiddle.net/mqe59dL6/

const noFocus = document.getElementById('noFocus');
const focus = document.getElementById('focus');

function handler(event) {
    event.cancelBubble = true;
    console.log(event.target.id || 'document', event.keyCode);
}

noFocus.addEventListener('keydown', handler);
focus.addEventListener('keydown', handler);
document.addEventListener('keydown', handler);

#noFocus {
  height: 60px;
  background-color: #aff;
  padding: 10px;
}

#focus {
  height: 60px;
  background-color: #faf;
  padding: 10px;
}

<div id="noFocus">
  I can't receive focus. Events will go to the document.
</div>
<div id="focus" tabindex="0">
  I can receive focus, click on me first.
</div>

An alternative is to handle the event on the document instead. Try document.addEventListener("keydown", ...).