How to send 'this' object reference after mouse click

[Glenn Marshall]

I have an interactive node, which when the user clicks, it calls a function inside or outside by passing 'this' so that the function knows what object instance it came from.

In this test - it should print the value '8' but this.val is undefined.

 

any ideas / help !

 

function Node (_x,_y){

    this.val=8;
    this.chart = new PIXI.Graphics();
    this.chart.interactive=true;
    this.chart.buttonMode = true;
    this.chart.on('pointerdown', hit);

    this.drawChart = function(){

        this.chart.beginFill(rgb([.5,.5,.5]), 1);
        this.chart.drawCircle(0,0,50);
        this.chart.endFill();
        tree.addChild(this.chart);
    }
    function hit(){
        console.log(this.val);
    }

}

 

[PsichiX]

this.hit = function() {};

because this object in function is whatever object this function belongs to, in short words - basically you could do also: this.chart.on('pointerdown', hit.bind(this))

[Glenn Marshall]

ill try that thanks!

[Glenn Marshall]

sill having problems - the hit function isn't being called..

function Node (_x,_y){

    this.val=8;
    this.chart = new PIXI.Graphics();
    this.chart.interactive=true;
    this.chart.buttonMode = true;
    this.chart.on('pointerdown', this.hit);

    this.drawChart = function(){

        this.chart.beginFill(rgb([.5,.5,.5]), 1);
        this.chart.drawCircle(0,0,50);
        this.chart.endFill();
        tree.addChild(this.chart);
    }
    this.hit=function(){
        console.log('hit');
    }

}

 

[Glenn Marshall]

this doesn't do anything either..

function Node (_x,_y){

    this.val=8;
    this.chart = new PIXI.Graphics();
    this.chart.interactive=true;
    this.chart.buttonMode = true;
    this.chart.on('pointerdown', hit.bind(this));

    this.drawChart = function(){

        this.chart.beginFill(rgb([.5,.5,.5]), 1);
        this.chart.drawCircle(0,0,50);
        this.chart.endFill();
        tree.addChild(this.chart);
    }
    function hit(n){
        console.log('hit');
    }

}

 

[charlie_says]

have you tried this variant:

function Node (_x,_y){

    this.val=8;
    this.chart = new PIXI.Graphics();
    this.chart.interactive=true;
    this.chart.buttonMode = true;
    this.chart.on('pointerdown', this.hit.bind(this);

    this.drawChart = function(){

        this.chart.beginFill(rgb([.5,.5,.5]), 1);
        this.chart.drawCircle(0,0,50);
        this.chart.endFill();
        tree.addChild(this.chart);
    }
    this.hit=function(){
        console.log('hit');
    }

}

 

[Glenn Marshall]

34 minutes ago, charlie_says said:

have you tried this variant:

function Node (_x,_y){

    this.val=8;
    this.chart = new PIXI.Graphics();
    this.chart.interactive=true;
    this.chart.buttonMode = true;
    this.chart.on('pointerdown', this.hit.bind(this);

    this.drawChart = function(){

        this.chart.beginFill(rgb([.5,.5,.5]), 1);
        this.chart.drawCircle(0,0,50);
        this.chart.endFill();
        tree.addChild(this.chart);
    }
    this.hit=function(){
        console.log('hit');
    }

}

 

TypeError: undefined is not an object (evaluating 'this.hit.bind')

[charlie_says]

Maybe, try defining the function before binding.

 

[Glenn Marshall]

done that - it's calling the function but n.val is showing as undefined..

function Node (_x,_y){

  this.val=8;
  this.chart = new PIXI.Graphics();
  this.chart.interactive=true;
  this.chart.buttonMode = true;

  this.hit=function(n){
    console.log(n.val);
  }

  this.chart.on('pointerdown', this.hit.bind(this));

  this.drawChart = function(){

    this.chart.beginFill(rgb([.5,.5,.5]), 1);
    this.chart.drawCircle(0,0,50);
    this.chart.endFill();
    tree.addChild(this.chart);
  }


}

 

[charlie_says]

this.hit=function(){
    console.log(this.val);
  }

[Glenn Marshall]

yeah that works but I need to access the passed in 'this' object.. here's a better example of what I need (shows as undefined)
 

function Node (_x,_y){

  this.val=8;
  this.chart = new PIXI.Graphics();
  this.chart.interactive=true;
  this.chart.buttonMode = true;

  this.hit=function(n){
    console.log(n.val);
  }

  this.chart.on('pointerdown', test.bind(this));

  this.drawChart = function(){

    this.chart.beginFill(rgb([.5,.5,.5]), 1);
    this.chart.drawCircle(0,0,50);
    this.chart.endFill();
    tree.addChild(this.chart);
  }


}

function test(n){
  console.log(n.val);
}

 

[Glenn Marshall]

figured it out...

function Node (_x,_y){

    this.val=8;
    this.chart = new PIXI.Graphics();
    this.chart.interactive=true;
    this.chart.buttonMode = true;
    this.chart.on('pointerdown', hit.bind(null,this));

    this.drawChart = function(){

        this.chart.beginFill(rgb([.5,.5,.5]), 1);
        this.chart.drawCircle(0,0,50);
        this.chart.endFill();
        tree.addChild(this.chart);
    }
    function hit(n){
        console.log(n.val);
    }

}