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);

its seem working try on here [demo](https://jsfiddle.net/yzn4k0rz/) — Luminous_Dev, Jan 04 '17 at 21:56
Possible duplicate of [how to move a div with arrow keys](http://stackoverflow.com/questions/4950575/how-to-move-a-div-with-arrow-keys) — Daniel Corzo, Jan 04 '17 at 21:57
Strange it's working now. Hmm. Btw, the idea of using a boolean to move a div is from stackoverflow, i forget where. I did have my own version before this but this seemed simpler. I'm really greatful for your quick responses guys : ) — Abdirizak Obsiye, Jan 04 '17 at 22:01
I know why it wasn't working!!! it was because i used a /* to comment out a function at the button without closing the comment with */. I added */ and it works now lol. — Abdirizak Obsiye, Jan 04 '17 at 22:03
@AbdirizakObsiye Didn't that cause a syntax error in the console? And your IDE should have pointed out the problem as well. — Barmar, Jan 04 '17 at 22:10
You should use a real IDE for coding, jsfiddle is just for testing it. — Barmar, Jan 04 '17 at 22:33

dokgu · Answer 1 · 2017-01-05T15:12:01.163

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.

Thank you. The thing about this one is that diagonal doesn't work e.g. if i clicked left and up at the same time. Hmm I'll see if i can get the diagonal thing to work. thank you again — Abdirizak Obsiye, Jan 04 '17 at 22:30
@AbdirizakObsiye Ok - I wasn't aware you needed diagonal movement as well, updated my answer. That should do the trick. — dokgu, Jan 05 '17 at 15:06

Javascript function for moving div with arrow keys not working?

1 Answers1

UPDATE