javascript function call not working

Question

I'm still getting used to javascript's syntax. I'm trying to bind actions to keypresses, and there's some disconnect here i can't spot. Why does the switch case get called without issue, but the function it calls never executes?

this.init = function() {
 $(document).keydown(this.handleKeyPress);
}
this.handleKeyPress = function(event) {
 switch (event.which) {
 case 37:
 alert("key press"); //this executes
 this.turn("left");
 break;
 case 38:
 this.turn("up");
 break;
 case 39:
 this.turn("right");
 break;
 case 40:
 this.turn("down");
 break;
 }
}
this.turn = function(direction) {
 alert(direction); //this does not
}

I think this is the only relevant code, but i'm happy to post more if helpful. Thanks for your help.

• Mr. Polywhirl: Maybe because this is in reference to the event and not the callee? What is your scope? Is this wrapped inside a block?
• Hamms: the context of your handleKeyPress function is being overridden by jQuery. To prevent that, you can explicitly bind the context yourself: $(document).keydown(this.handleKeyPress.bind(this))
• scrappedcola: if you console.log(this) inside your switch statement I'll bet the this isn't in the context you expect. Why are you using this? Is this inside another object? If not update your definition to var turn = function(direction){...} and inside the case use turn('left').
• sam: Thanks everyone! The problem is definitely this in an anonymous function. I'm trying too hard to force js to look like Java :/

Answer 1

Most likely you are running into issues with what the meaning of "this" is. When you're inside of your anonymous function this refers to the anonymous function, not the outer function that it's nested in. You probably want to do something like this:

var myObj = this ;
myObj.init = function() {
 $(document).keydown(myObj.handleKeyPress);
}
myObj.handleKeyPress = function(event) {
 switch (event.which) {
 case 37:
 alert("key press"); //this executes
 myObj.turn("left");
 break;
 case 38:
 myObj.turn("up");
 break;
 case 39:
 myObj.turn("right");
 break;
 case 40:
 myObj.turn("down");
 break;
 }
}
myObj.turn = function(direction) {
 alert(direction); //this does not
}