I am attempting to move my div element by using key presses to adjust the CSS attributes of the HTML elements. However, despite implementing the necessary code, the mover refuses to budge and nothing appears when I inspect the elements or their attributes.
var mover;
function moveDivBlock(e){
if ((e.keyCode == 69) ||(e.keyCode == 68)||(e.keyCode == 67)){//go right
moveBlock(mover,10,0);}
if ((e.keyCode == 81) ||(e.keyCode == 65)||(e.keyCode == 90)){//go left
moveBlock(mover,-10,0);}
if ((e.keyCode == 81) ||(e.keyCode == 87)||(e.keyCode == 69)){//go up
moveBlock(mover,0,10);}
if ((e.keyCode == 90) ||(e.keyCode == 88)||(e.keyCode == 67)){//go down
moveBlock(mover,0,-10);}
}
function handleKeyDown(e) {
moveDivBlock(e);
}
function moveBlock(elem, rightShift, upShift){
var curLeft = parseInt(elem.style.left);
var curTop = parseInt(elem.style.top);
elem.style.left = (curLeft + rightShift) + "px";
elem.style.top = (curTop - upShift) + "px";
}
window.onload=function(){
mover=document.getElementById("mover");
}#mover{
position:absolute;
top:290px;
left:130px;
background-color:green;
width:50px;
height:50px;
border:2px solid black;
}<body onkeydown="handleKeyDown(event);">
<div id="mover"></div>
</body>