keycode - Javascript

Question

Good evening my dear, I am making a 'Function' in javascript but it is not running in my browser Chrome.

  function move(){
         var obj = document.getElementById("dv1");
         var tecla = KeyboardEvent.keyCode;
         /*37 -Esquerda - 38-cima - 39-direita 40-baixo*/

         if(tecla==37){
            px-=10; //salto
            obj.style.left= px +"px";
         }else if(tecla==38){
            py-=10;
            obj.style.top= py+"px";
         }else if(tecla==39){
            px+=10;
            obj.style.left=px+"px";
         }else if(tecla==40){
            py+=10;
            obj.style.top=py+"px";
         }else if(tecla==13){
           alert("este evento foi para o beleleu");
           obj.removeEventListener("keydown",move); 
          }
}

document.addEventListener("keydown",move);

The idea is trivial to "move a square" with "keydown", but when inspecting the Chrome console there is an error in "Event.keycode" that I cannot determine. Thanks for your cooperation.

Answer 1

When you create a function that is used as callback of an event, you must be attentive to the arguments that are passed to it. Every function that is executed in an event takes as argument an object of type Event, corresponding to the event triggered.

When trying to pick up the key that was "triggered", you are trying to do it on the object native KeyboardEvent, instead of using the object itself Event which is always passed as argument, as I have already mentioned.

So instead of using the KeyboardEvent, define a parameter (e. g. event) in function move, and get the key pressed. And instead of keyCode (which incidentally is obsolete), you can use the which, being like this:

function move(event) {
    var obj = document.getElementById("dv1");
    var tecla = event.which;
    /*37 -Esquerda - 38-cima - 39-direita 40-baixo*/
    
    if(tecla==37){
        px-=10; //salto
        obj.style.left= px +"px";
    } else if (tecla==38) {
        py-=10;
        obj.style.top= py+"px";
    } else if (tecla==39) {
        px+=10;
        obj.style.left=px+"px";
    } else if (tecla==40) {
        py+=10;
        obj.style.top=py+"px";
    } else if (tecla==13) {
        alert("este evento foi para o beleleu");
        obj.removeEventListener("keydown", move); 
    }
}
document.addEventListener("keydown", move);

Note (28/05/2020): today, both the keyCode like the which are obsolete. According to the documentation, the most appropriate property to be used in place is the key, what would leave the code that way:

function move(event) {
   var obj = document.getElementById("dv1");
   var tecla = event.key;
   
   if(tecla == "ArrowLeft"){
       px-=10; //salto
       obj.style.left= px +"px";
   } else if (tecla == "ArrowUp") {
       py-=10;
       obj.style.top= py+"px";
   } else if (tecla == "ArrowRight") {
       px+=10;
       obj.style.left=px+"px";
   } else if (tecla == "ArrowDown") {
       py+=10;
       obj.style.top=py+"px";
   } else if (tecla == "Enter") {
       alert("este evento foi para o beleleu");
       obj.removeEventListener("keydown", move); 
   }
}
document.addEventListener("keydown", move);

I hope I’ve helped!