Move Text with Buttons
THIS TEXT MOVES
<html><head>
<body>
<script>
let textToMove;
function whenLoads( )
{
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';
}
</script>
</head>
<body onload="whenLoads( );">
<center>
<br>
<input type="button" id="leftButton" value="Left"
onmousedown="moveLeft( );"></button>
<br>
<input type="button" id="rightButton" value="Right"
onmousedown="moveRight( );"></button>
<br>
<input type="button" id="upButton" value="Up"
onmousedown="moveUp( );"></button>
<br>
<input type="button" id="downButton" value="Down"
onmousedown="moveDown( );"></button>
<br>
<div id="theDiv">THIS TEXT MOVES</div>
</center>
</body>
</html>
<body>
<script>
let textToMove;
function whenLoads( )
{
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';
}
</script>
</head>
<body onload="whenLoads( );">
<center>
<br>
<input type="button" id="leftButton" value="Left"
onmousedown="moveLeft( );"></button>
<br>
<input type="button" id="rightButton" value="Right"
onmousedown="moveRight( );"></button>
<br>
<input type="button" id="upButton" value="Up"
onmousedown="moveUp( );"></button>
<br>
<input type="button" id="downButton" value="Down"
onmousedown="moveDown( );"></button>
<br>
<div id="theDiv">THIS TEXT MOVES</div>
</center>
</body>
</html>