How To Move An Object With Arrow Keys using JavaScript

In this tutorial, you'll learn how to move an object on the page with arrow keys using JavaScript.

In this JavaScript tutorial we'll tackle the unsually scenario of moving an HTMl element on the page using the arrow keys on your keyboard.

Whilst this isn't a common development task, it's an interesting challenge that requires some manipulation of the DOM, some CSS styling and some basic JavaScript language features to create an interactive page.

We'll start the tutorial by setting up our document and applying some CSS styling to an HTML div element. The next part will be setting up the keyboard event listener and responding the to the user input to make the object move when arrow keys are pressed. Channel Handle @codebubb

[georgei]

I'm gaming a Pacman game as a university assignment. this helped. thanks mate.

[nageshthotakura]

Sir, excellent tutorials. Learned a lot. Thank u for your great efforts

[ilyly]

why must top and left be set at 0? could the square be positioned somewhere else to start?

[bethshebaovercame]

Will someone explain why we needed to “extract the style element from block” here? What did this do for the code?

[starzzz]

learning about JavaScript. Trying to create a game

[trungnguyencong]

what If I want to move object in specific area any demo pls let me know tks

[ipadeolataiwo]

i really need to use this to build move some test in my page i have been bathling this for about 3 days now

[GuitC]

isnt it java query? you dont use numeric values representing keyboard keys

[peterpolak]

I have a question. I copied whole code to know if that works for me and I m getting msg (block is not defined). Anybody know what can be wrong??

[musicgaines]

What exactly is that block? is it like a container? im very new at this, plz explain

[zidan]

in my case it returned empty string
my code:
case "ArrowUp":
box.style.bottom =parseInt(box.style.bottom) +5 + 'px';

[beastly]

I have set my character to bottom: 2%; and pressing the up arrow works fine. However, my character moves to the position it was before 2% bottom. How come?

[spudwish]

Holy fork, why would you write code in the browser console? 🤯

[yahyamohammed]

How is this a red square it's orange not red

[XilqaXilqa]

😂I'm 49 seconds in and i can hear you planing to move objects in css using JavaScript you fail...in canvas we use switch statement and case up down left and right but you should already know that since your the teacher😂😂😂 and I'm the one walking out your class🎉

[ihzaq]

Umm sorry? I thought you show us in JavaScript?