Why is my div element not moving based on my movement functions?

user_13217483 0
Viewed 64

I am trying to move my div element by having the body sense what key button I pressed, finding the right key symbol w, a, x, d, and then subtracting or adding from the css attributes of the html elements.

However it does not work and whenever I console log the elements or its attributes, nothing appears. The mover will not move.

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>

javascript
1 Answers

The reason this was not working, elem.style.top returns inline style only, not style from css file. To get style from css file you need to use getComputedStyle(elem). Please try this


function moveBlock(elem, rightShift, upShift){
    var curLeft = parseInt(getComputedStyle(elem).left); 
    var curTop = parseInt(getComputedStyle(elem).top); 
    elem.style.left = (curLeft + rightShift) + "px"; 
    elem.style.top = (curTop - upShift) + "px"; 
}
user_96482520
Related