javascript object - how to call class variable inside class function

Question

i want to call variable "info" when user click on div

the code supposed to print "success"

but its print "undefined"

html

<div id="container" style="width: 100px; height: 100px; border: solid black 1px">

javascript

window.onload = function(){

var Controller = function(){

    this.info = '  success  ';

    this.listener = function(){
        alert( this.info );
    }

    this.set = function( ele ){
        ele.onclick = this.listener;
    }
}


var target = document.getElementById('container');
var controller = new Controller();
    controller.set( target );



}

jsfiddle

my goal

i need to call variable "info" inside Controller listener
i need to give action click inside Controller set

my problem is inside function "listener",

keyword "this" refer to div element, not class Controller

how to call variable info inside function "listener" ?

user3559349 · Accepted Answer · 2014-05-03 04:50:39Z

3

Try

var Controller = function(){
  var self = this; // Add this
  this.info = '  success  ';
  this.listener = function(){
    alert( self.info ); // Modify here
  }
....

answered May 3, 2014 at 4:50

user3559349

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

Comments

Blender · Accepted Answer · 2014-05-03 05:40:11Z

0

You can use bind to bind the function to the right this:

ele.onclick = this.listener.bind(this);

answered May 3, 2014 at 5:40

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

javascript object - how to call class variable inside class function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related