Is there a way to call a function by a key press in Javascript? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Is there a way to call a function by a key press in Javascript? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Is there a way to call a function on the event of a key press. My goal is to make a movable block and I was wondering if you could call the function to move a <div> block around. I also have an issue with making the character visible so it would be helpful to help me with that!

JavaScript

//variables
var player = document.getElementById('player');

var character = {
left: player.style.left + 1,
right: player.style.right + 1,
top: player.style.top + 1,
bottom: player.style.bottom + 1,
body: document.createElement('div'),
}


//functions
 function running() {
    console.log("Running");
    console.log("Program running");
    document.appendChild('div');
 }

 function loop() {
    running();
 }

function moveRight() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.right = right + 2 + "px";
}

function moveLeft() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.left = left + 2 + "px";
}

function moveup() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.right = right + 2 + "px";
}



//functions called
 loop();

HTML

<!DOCTYPE html>
<html>
<head>
    <title>RPG</title>
</head>
<body>
    <div id="allCode">
    <script type="text/javascript" src="index.js"></script>
    <style type="text/css" src="style.css"></style>
    </div>
    <div id="player"></div>
</body>
</html> 

Answer

There are a lot of examples on how to deal with key handling events in javascript, this should get you started :

document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37:
            //left function
            break;
        case 38:
            //Up function
            break;
        case 39:
            //Right function
            break;
    }
});

Edit: The .keyCode, .which, .charCode are deprecated properties: so you should use event.key

for example:

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      //Up function
      break;

    case "Left": // IE/Edge specific
    case "ArrowLeft":
      //left function
      break;

    case "Right": // IE/Edge specific
    case "ArrowRight":
      //Right function
      break;
   
    default:
      return; // No key event
  }

  event.preventDefault(); // Avoid key handling twice
}, true);
We are here to answer your question about Is there a way to call a function by a key press in Javascript? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji