0

I'm trying to write a script that moves the orange box around inside the blue box using the arrow keys and Javascript eventlistener. When I run the page, nothing happens. I've tried poking around in the console, but it isn't giving me any output at all. I'm sure I'm missing something small but I can't for the life of me figure it out. Any suggestions would be great!

var orange = document.getElementById("orange");
orange.addEventListener("onkeydown", move, false);
function move(e);
       
e = e || window.event;
    
   if(e.keyCode == '38'){ //up
     if(parseInt(orange.style.top) > '0'){
      orange.style.top = parseInt(orange.style.top) - 5;
     }
   } else if (e.keyCode == '40'){ //down
     if(parseInt(orange.style.top) < '425'){
      orange.style.top = parseInt(orange.style.top) + 5;
     }
   } else if (e.keyCode == '37'){ //left
     if(parseInt(orange.style.top) > '0'){
      orange.style.left = parseInt(orange.style.left) - 5;
     }
   } else if (e.keyCode == '39') { //right
     if(parseInt(orange.style.left) < '425') {
      orange.style.left = parseInt(orange.style.left) + 5;
     }    
   }
}
     
#blue{
    background-color: blue;
    position: relative;
    height: 500px;
    width: 500px
}
#orange{
    background-color: orange;
    position: absolute;
    width: 75px;
    height: 75px;
};
 <div id="blue">
     <div id ="orange" style="left: 30px; top:30px;"></div>
 </div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jayShepard
  • 3
  • 2
  • FYI, `e = e || window.event;` is unnecessary. You're using a fix that doesn't make sense inside an `addEventListener` handler. –  Sep 01 '16 at 21:00

3 Answers3

1

You should be getting a syntax error in your console because you're not declaring your move function correctly.

function move(e);

    e = e || window.event;

should look like this:

function move(e) {

        e = e || window.event;
bmceldowney
  • 2,307
  • 13
  • 19
  • Ok, I changed it but it didn't make a difference – jayShepard Sep 01 '16 at 20:48
  • That is only part of it, you can't associate it to that div if the key press is not associated with it. Here is a possible solution: http://stackoverflow.com/questions/2878983/capture-key-press-without-placing-an-input-element-on-the-page – Randolph Abeyta Sep 01 '16 at 20:50
1

You have a couple problems:

1) The event is keydown not onkeydown (unless you are adding directly to the object: (e.g. orange.onkeydown)

2) Top is measured in pixels, not just an integer - you need to add + 'px' to your top changes: orange.style.top = parseInt(orange.style.top) + 5 + 'px'

Other notes:

  • Might work better to have the event listener on window as it will have focus, idk though - didn't test that.
  • e.keyCode is a Number, not a String
  • as @bmceldowney mentioned, you have a syntax error in your function declaration

Working version of your code: https://jsfiddle.net/kkhkL065/

Rob M.
  • 35,491
  • 6
  • 51
  • 50
  • 1
    Yes. A div is unlikely to have focus so it won't receive a keydown event. UI elements like input and textareas can receive keydown events. Listening on document or window i preferred because the event would bubble up anyway regardless of what part of the page have focus. – slebetman Sep 01 '16 at 20:48
  • Thanks! I made the changes you and @slebetman suggested and it works perfectly. – jayShepard Sep 01 '16 at 21:04
0

As stated in this documentation page by Mozilla, the possible targets of the keydown event (not onkeydown as erroneously written in your code) are

Focused element processing the key event, root element if no suitable input element focused

So basically only input (<input> and <textarea>) or root elements (document or window) can process the event.

Modify your code like this:

var orange = document.getElementById("orange");
var move = function(e){
    orange.classList.add("red");
}
window.addEventListener("keydown", move, false);

Here's a link to JSFiddle: https://jsfiddle.net/nbj0Lujw/

Hope it helps :)

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Danny
  • 654
  • 5
  • 7