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.
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.