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
– Bertrei Lakan, Commented Nov 19, 2018 at 17:10
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance — Alexander Staroselsky
– Alexander Staroselsky, Commented Nov 19, 2018 at 17:22

Alexander Staroselsky · Accepted Answer · 2018-11-19 17:18:48Z

1

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!

answered Nov 19, 2018 at 17:18

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

Comments

Sheik Althaf · Accepted Answer · 2018-11-19 17:21:29Z

0

try like this

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

answered Nov 19, 2018 at 17:21

Sheik Althaf

1,61511 silver badges16 bronze badges

1 Comment

Nick Over a year ago

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 very helpful. Please edit your answer - From Review

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related