title: Javascript function for moving div with arrow keys not working?
body: <p>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. </p>
  
  <p>Thank you for any help in advance. </p>
  
  <p>CSS --</p>
  
  <pre><code> #log {
       position:absolute;
        width: 50px;
        height: 50px;
        border: 2px solid black;
        background-color: white;
        color: black;
        font-size: 20px;
  
        left: 20px;
      }
  </code></pre>
  
  <p>HTML---</p>
  
  <pre><code>&lt;div id="log"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript --</p>
  
  <pre><code>    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);
  </code></pre>