Keyboard Control Moves Text
<!-- save as Keyboard Control Moves Text.html -->
<html><head>
<title>Keyboard Control Moves Text </title>
<script>
let textToMove;
function whenLoaded()
{
window.addEventListener("keydown", whichKeyPressed, false);
textToMove = document.getElementById("theDiv");
textToMove.style.position='relative';
textToMove.style.left='0px';
textToMove.style.top='50px';
}
function moveLeft( )
{
textToMove.style.left = parseInt(textToMove.style.left)-8 +
'px';
}
function moveRight( ){
textToMove.style.left = parseInt(textToMove.style.left)+8 +
'px';
}
function moveUp( ){
textToMove.style.top = parseInt(textToMove.style.top)-8 +
'px';
}
function moveDown( ){
textToMove.style.top = parseInt(textToMove.style.top)+8 +
'px';
}
function whichKeyPressed(event)
{
if(event.keyCode === 38) //up arrow
{
moveUp();
}
else if(event.keyCode === 40) //down arrow
{
moveDown();
}
else if(event.keyCode === 37) //left arrow
{
moveLeft();
}
else if(event.keyCode === 39) //right arrow
{
moveRight();
}
}
</script>
</head>
<body onload="whenLoaded()">
<div id="theDiv">THIS TEXT MOVES</div>
</body>
</html>
<html><head>
<title>Keyboard Control Moves Text </title>
<script>
let textToMove;
function whenLoaded()
{
window.addEventListener("keydown", whichKeyPressed, false);
textToMove = document.getElementById("theDiv");
textToMove.style.position='relative';
textToMove.style.left='0px';
textToMove.style.top='50px';
}
function moveLeft( )
{
textToMove.style.left = parseInt(textToMove.style.left)-8 +
'px';
}
function moveRight( ){
textToMove.style.left = parseInt(textToMove.style.left)+8 +
'px';
}
function moveUp( ){
textToMove.style.top = parseInt(textToMove.style.top)-8 +
'px';
}
function moveDown( ){
textToMove.style.top = parseInt(textToMove.style.top)+8 +
'px';
}
function whichKeyPressed(event)
{
if(event.keyCode === 38) //up arrow
{
moveUp();
}
else if(event.keyCode === 40) //down arrow
{
moveDown();
}
else if(event.keyCode === 37) //left arrow
{
moveLeft();
}
else if(event.keyCode === 39) //right arrow
{
moveRight();
}
}
</script>
</head>
<body onload="whenLoaded()">
<div id="theDiv">THIS TEXT MOVES</div>
</body>
</html>