为什么javascript addEventListener不做任何事情？

Question

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> 

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

Answer 2

You have a couple problems:

1) The event is keydown not onkeydown (unless you are adding directly to the object: (eg 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/

Answer 3

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