Javascript keydown manipulating object

Question

I'm trying to make an object handling keyboard inputs from the user.

var control = new Control ();

function Control () {
    this.w = 0;
    this.a = 0;
    this.s = 0;
    this.d = 0;
    document.addEventListener("keydown", this.KeyDown);
    document.addEventListener("keyup", this.KeyUp);
}
Control.prototype.KeyDown = function (event, control) {
    switch (event.keyCode) {
        case 87:
            this.w = 1;
            break;
        case 65:
            this.a = 1;
            break;
        case 83:
            this.s = 1;
            break;
        case 68:
            this.d = 1;
            break;
    }
    console.log("w: " + this.w + "\na: " + this.a + "\ns: " + this.s + "\nd: " + this.d);
}
Control.prototype.KeyUp = function (event) {
    switch (event.keyCode) {
        case 87:
            this.w = 0
            break;
        case 65:
            this.a = 0;
            break;
        case 83:
            this.s = 0;
            break;
        case 68:
            this.d = 0;
            break;
    }
    console.log("w: " + this.w + "\na: " + this.a + "\ns: " + this.s + "\nd: " + this.d);
}

The problem is that whenever I write "this" inside the "keyDown", and "keyUp" functions, "this" refers to the document, and not the "control" object. How do I access the "control" object from within the functions?

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

this.KeyDown,this.KeyUp will be undefined inside Control constructor, you need to move var control = new Control (); at the end.
You can bind control context using below code.

document.addEventListener("keydown", this.KeyDown.bind(this)); document.addEventListener("keyup", this.KeyUp.bind(this));

Note: bind is not supported in IE8, alternative is here

edited May 23 '17 at 11:51

Community

1
1

answered Dec 28 '15 at 02:32

Jagdish Idhate

7,513
9
35
51

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Move var control = new Control (); to the end of your script. Functions in prototype have not been defined yet when you are trying to use them right now.

Then, you can bind the function to the context you want.

document.addEventListener("keydown", this.KeyDown.bind(this));
document.addEventListener("keyup", this.KeyUp.bind(this));

See this fiddle.

There are other options as well, but in your case, bind would be easier. For more information take a look at the answer on this question.

edited May 23 '17 at 12:32

Community

1
1

answered Dec 28 '15 at 02:06

Aᴍɪʀ

7,623
3
38
52

I tried to by using bind but I am seeing an error in console.Here is the jsfiddle https://jsfiddle.net/vasi_32/pg7rLc48/1/ – brk Dec 28 '15 at 03:39
You have to move this line `var control = new Control()` to the bottom of your code. Also you had one extra `.document` in the fiddle which was causing problems. See this [fiddle](https://jsfiddle.net/pg7rLc48/2/) – Aᴍɪʀ Dec 28 '15 at 03:43
Sorry my mistake, I pasted the wrong url .Here is the correct one https://jsfiddle.net/vasi_32/pg7rLc48/3/. I have removed the extra .document.But we will still get this undefined issue if var control = new Control (); is not moved to the bottom.Thanks – brk Dec 28 '15 at 03:48
@user2181397 well, you have to move it to the bottom, because all the functions in `prototype` are going to be defined after that right now. – Aᴍɪʀ Dec 28 '15 at 03:53
@user2181397 Does that answer your question? – Aᴍɪʀ Dec 28 '15 at 04:25
Surely yes ,It is helpful – brk Dec 28 '15 at 04:51

Javascript keydown manipulating object

2 Answers2