Moving the Blue Box

See question on Stack Overflow: https://stackoverflow.com/questions/47793883/javascript-movement-api

by Patrick Hund

HTML

<div id="me"></div>

CSS

#me {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

JavaScript

document.onkeydown = function(event) {
    var kc = event.keyCode;
    var me = document.getElementById('me');
    me.innerHTML = kc;
    var XPos = me.offsetLeft;
    var YPos = me.offsetTop;
    if (kc == '39') {
        me.style.left = ++XPos + 'px';
    }
    if (kc == '37') {
        me.style.left = --XPos + 'px';
    }
    if (kc == '38') {
        me.style.top = --YPos + 'px';
    }
    if (kc == '40') {
        me.style.top = ++YPos + 'px';
    }
};