Why isn't the Javascript addEventListener doing anything?

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>

FYI, e = e || window.event; is unnecessary. You're using a fix that doesn't make sense inside an addEventListener handler. — user1106925
– user1106925, Commented Sep 1, 2016 at 21:00

Rob M. · Accepted Answer · 2016-09-01 20:46:22Z

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/

answered Sep 1, 2016 at 20:46

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

slebetman Over a year ago

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.

jayShepard Over a year ago

Thanks! I made the changes you and @slebetman suggested and it works perfectly.

bmceldowney · Accepted Answer · 2016-09-01 20:43:13Z

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;

answered Sep 1, 2016 at 20:43

bmceldowney

2,31514 silver badges19 bronze badges

2 Comments

jayShepard Over a year ago

Ok, I changed it but it didn't make a difference

Randolph Abeyta Over a year ago

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: stackoverflow.com/questions/2878983/…

Mr Lister · Accepted Answer · 2016-09-18 06:43:44Z

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

edited Sep 18, 2016 at 6:43

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Sep 1, 2016 at 21:00

Danny

6845 silver badges7 bronze badges

2 Comments

jayShepard Over a year ago

I've never heard of JSFiddle, looks like it'll be really helpful!

Danny Over a year ago

It's really helpful when you need to test something by isolating it from the rest of your codebase :) try codepen.io too ;)

Collectives™ on Stack Overflow

Why isn't the Javascript addEventListener doing anything?

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related