how to move an image with arrow keys in javascript

Witty Whale answered on December 22, 2021 Popularity 6/10 Helpfulness 8/10

answer how to move an image with arrow keys in javascript

related how to move an image with arrow keys in javascript

how to move an image with arrow keys in javascript

Comment

//HTML document
<html>
  <head>
  <title>Moving image</title>
</head>
<body>
    <img id="movingImage" style="position:absolute;" src="https://image.freepik.com/free-vector/flat-design-red-comic-style-background_23-2148797742.jpg"/>
    </body>
</html>

//Javascript

//getting the image node
const movingImage = document.querySelector('#movingImage');

//when the user presses any key, the 'document.body.onkeydown' function is called
//move the image inside that function
document.body.onkeydown = (e) => {
  //handle the moving of image
  //e has a property called key which states the name of the key pressed
  
  switch(e.key){
    case 'ArrowUp':
      movingImage.offsetTop--;
      break;
      case 'ArrowLeft':
      movingImage.offsetLeft--;
      break;
      case 'ArrowRight':
      movingImage.offsetTop++;
      break;
      case 'ArrowDown':
      movingImage.offsetLeft++-;
      break;
  }
}

Popularity 6/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: arrow-keys image javascript move

Link to this answer
Share Copy Link

Contributed on Dec 22 2021

Witty Whale

0 Answers Avg Quality 2/10

Closely Related Answers

how to move an image with arrow keys in javascript

Comment

<button onclick="document.location='file:///C:/Users/user/Desktop/nx.png'">click here!</button>

Popularity 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: javascript move arrow-keys html image

Link to this answer
Share Copy Link

Contributed on Aug 04 2022

ahmed nfinif

0 Answers Avg Quality 2/10

how to move an image with arrow keys in javascript

Contents

More Related Answers

how to move an image with arrow keys in javascript

Closely Related Answers

how to move an image with arrow keys in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.