Uncaught TypeError is not a function class method

Question

I am new to JavaScript, and I am getting this error:

Uncaught TypeError: this.move is not a function

SO won't let me post if my question is mostly code, so here's a link the the file in github: https://github.com/pianocomposer321/Dodger.js/blob/master/player.js

The error occurs at the first case statement in the onKeyPressed function when it tries to call this.move().

class Player {
    constructor(width, height, cvs) {
        this.width = width;
        this.height = height;
        this.cvs = cvs;
        this.ctx = this.cvs.getContext("2d");
        this.x = this.cvs.width / 2;
        this.y = this.cvs.height - this.height;

        document.addEventListener("keydown", this.onKeyPressed);
    }

    draw() {
        this.ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    move(x, y) {
        this.x += x;
        this.y += y;
    }

    onKeyPressed() {
        switch (window.event.keyCode) {
            case 37:
                this.move(-5, 0);
                break;
            case 38:
                this.move(0, 5);
                break;
            case 39:
                this.move(5, 0);
                break;
            case 40:
                this.move(0, -5);
                break;
        }
    }
}

export { Player };

Thanks in advance!

What do you mean? Isn't that what the `document.addEventListener("keydown", this.onKeyPressed);` does? — Thaddaeus Markle, Oct 09 '20 at 00:41

score 1 · Accepted Answer · answered Oct 09 '20 at 00:42

The addevent listener is changing this. You need to use bind.

class Player {
    constructor(width, height, cvs) {
        this.x = 0;
        this.y = 0;

        document.addEventListener("keydown", this.onKeyPressed.bind(this));
    }

    move(x, y) {
        this.x += x;
        this.y += y;
        console.log(this.x, this.y);
    }

    onKeyPressed() {
        switch (window.event.keyCode) {
            case 37:
                this.move(-5, 0);
                break;
            case 38:
                this.move(0, 5);
                break;
            case 39:
                this.move(5, 0);
                break;
            case 40:
                this.move(0, -5);
                break;
        }
    }
}

new Player()

Uncaught TypeError is not a function class method

1 Answers1