Typescript,TypeError is not a function, Calling another method in the same class

Question

I'm currently working on a angular project and I don't understand the error message. How the error occurs:When triggering the mouseevent (mousedown: simply a mouseclick event) I call the mousedown method, in this method the method addNode is called and the error occurs

Typerror: your function this.addNode() is not a function at HTMLCanvasElement

   export class Graph {
    private ctx : CanvasRenderingContext2D;
    private canvas: HTMLCanvasElement;
    private readonly width: number;
    private readonly height: number;

    nodes: Node[] = [];




    constructor(canvas: HTMLCanvasElement){
        this.canvas = canvas;
        this.ctx = this.canvas.getContext('2d');
        this.width = canvas.width;
        this.height = canvas.height;   
        this.nodes = [];


        canvas.addEventListener('mousedown', this.onDown, false);
        this.draw1();

    }



    onDown(e:MouseEvent){
        ***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
        console.log("LOG LOG " +  e.offsetX  + ", " + e.offsetY);
        console.log("My Array: " + this.nodes.length);
    }

     addNode(x:number,y:number){
        this.nodes.push(new Node(x,y));
    }


    draw1():void{
       // console.log("Should be drawing");
        //console.log("Node legnth : " + this.nodes.length);
        this.nodes.forEach(node => {
            console.log("Why you not doing");
            this.ctx.fillStyle = "green";
            this.ctx.beginPath();

            this.ctx.arc(node.x,node.y,25,0,2*Math.PI);
            this.ctx.stroke();
            this.ctx.fill();
        });
        window.requestAnimationFrame(()=>this.draw1());

    }
}

class Node{
    x:number;
    y:number;

    constructor(x:number,y:number){
        this.x = x;
        this.y = y;
    }
}

I thank you all in advance :)

Correction: As event method I meant the onDown() method and not mouseDown — Bertrei Lakan, Nov 19 '18 at 17:10
Possible duplicate of [TypeScript, how to keep class methods event handlers context to "this" instance](https://stackoverflow.com/questions/40822109/typescript-how-to-keep-class-methods-event-handlers-context-to-this-instance) — Alexander Staroselsky, Nov 19 '18 at 17:22

score 1 · Answer 1 · answered Nov 19 '18 at 17:18

Try using an arrow function for method onDown() to preserve the context of this to the class Graph:

onDown = (e: MouseEvent) => {
    ***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
    console.log("LOG LOG " +  e.offsetX  + ", " + e.offsetY);
    console.log("My Array: " + this.nodes.length);
}

Alternatively, if the actual <canvas> element exists in your template, you can use (mousedown) instead of manually adding the event handler in the constructor().

Hopefully that helps!

score 0 · Answer 2 · answered Nov 19 '18 at 17:21

0

try like this

canvas.addEventListener('mousedown', (e) => this.onDown(e), false);

answered Nov 19 '18 at 17:21

Sheik Althaf

1,595
10
16

2

While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find [how to write a good answer](https://stackoverflow.com/help/how-to-answer) very helpful. Please edit your answer - [From Review](https://stackoverflow.com/review/low-quality-posts/21457632) – Nick Nov 20 '18 at 02:00

Typescript,TypeError is not a function, Calling another method in the same class

2 Answers2