Javascript function for moving div with arrow keys not working?

Question

I've been trying to move a div around a page just using the arrows keys on my keyboard. It seems not to be working. I had it working before but for some reason it is no longer working. Could you let me know what you think the issue is? I have a feeling it has something to do with window.onkeydown and onkeyup.

Thank you for any help in advance.

CSS --

 #log {
     position:absolute;
      width: 50px;
      height: 50px;
      border: 2px solid black;
      background-color: white;
      color: black;
      font-size: 20px;

      left: 20px;
    }

HTML---

<div id="log"></div>

JavaScript --

    var Keys = {
        up: false,
        down: false,
        left: false,
        right: false
    };

    var hero = {
        x: 0,
      y: 0
    };

    var log = document.getElementById("log");

    window.onkeydown = function(e){
         var kc = e.keyCode;
         e.preventDefault();

         if(kc === 37) Keys.left = true;
         if(kc === 38) Keys.up = true;
         if(kc === 39) Keys.right = true;
         if(kc === 40) Keys.down = true;
     };

    window.onkeyup = function(e){
         var kc = e.keyCode;
         e.preventDefault();

         if(kc === 37) Keys.left = false;
         if(kc === 38) Keys.up = false;
         if(kc === 39) Keys.right = false;
         if(kc === 40) Keys.down = false;
    };



    function main() {

        move();

    };



    function move(){

        if(Keys.up){
            hero.y -= 10;
            var p = hero.y;
            var t = p + 10;
            log.style.top = p + "px";
            log.style.bottom = t + "px";
            //color();
        }

        if(Keys.down){
            hero.y += 10;
            var g = hero.y;
            var q = g - 10;
            log.style.bottom = g + "px";
            log.style.top = q + "px";
            //color();

        }

        if(Keys.left) {
            hero.x -= 10;
            var z = hero.x;
            var q = z + 10;
            log.style.left = z + "px";
            log.style.right = q + "px";
            //color();
        }

        if(Keys.right){
            hero.x += 10;
            var z = hero.x;
            var q = z - 10;
            log.style.right = z + "px";
            log.style.left = q + "px";
           // color();
        }
    }

    setInterval(main, 50);

Answer 1

If you're open to using jQuery this might help you out.

$(document).ready(function() {
  var hero = $("#log");
  var speed = 1;
  var direction = {
    left: false,
    up: false,
    right: false,
    down: false
  };

  $(document).on('keydown', function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if (kc === 37) direction.left = true;
    if (kc === 38) direction.up = true;
    if (kc === 39) direction.right = true;
    if (kc === 40) direction.down = true;
  });

  $(document).on('keyup', function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if (kc === 37) direction.left = false;
    if (kc === 38) direction.up = false;
    if (kc === 39) direction.right = false;
    if (kc === 40) direction.down = false;
  });

  function move() {
    if (direction.left) hero.css("left", (hero.position().left - speed) + "px");
    if (direction.up) hero.css("top", (hero.position().top - speed) + "px");
    if (direction.right) hero.css("left", (hero.position().left + speed) + "px");
    if (direction.down) hero.css("top", (hero.position().top + speed) + "px");
  }

  setInterval(move, 1);
});

Here's a Fiddle to demonstrate the result. Feel free to customize it to your needs.

UPDATE

And here's another Fiddle to accept multiple buttons pressed at the same time.