JavaScript class properties not available in onclick method

Question

Every time that I click the canvas that is created with this code, it always says that this.element is undefined when it clearly has been created. The graph that I am displaying is showing up, that is not the problem. If I replace this.element with document.getElementById(id), the code will work as intended. Any help or explanation is greatly appreciated, thanks.

function DrawableChart(id){

    // get canvas
    this.element = document.getElementById(id);
    this.ctx = this.element.getContext("2d");

    // set data
    this.data = {...};

    // special options
    this.options = {...};

    // create chart
    this.chart = new Chart(this.ctx).Line(this.data, this.options);

    // updating chart
    this.update = function(e){
        // this is where the error is
        console.log(this.element);
        // this line also causes an error
        var rect = this.element.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
    };

    // update when clicked
    this.element.addEventListener('click', this.update);

}

this always refers to the caller of the method. I suspect your error lies beyond the code you've provided — Andrue Anderson
– Andrue Anderson, Commented Dec 18, 2015 at 21:33
When you call .addEventListener, use this.update.bind(this) instead of just this.update. — Pointy
– Pointy, Commented Dec 18, 2015 at 21:33

Louay Alakkad · Accepted Answer · 2015-12-18 22:16:02Z

1

It's an issue with the update method and this value. Try changing the following:

this.update = function(e){ /*...*/ };

to:

this.update = function(e){ /*...*/ }.bind(this);

answered Dec 18, 2015 at 22:16

Louay Alakkad

7,4882 gold badges26 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

JavaScript class properties not available in onclick method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related