kelibra kelibra - 3 months ago 22
Javascript Question

javascript object variable becomes undefined inside anonymous function

So I can't quite figure out why the variable this.tasks becomes undefined inside of the add event listener I have inside of my goal object. I have a feeling it might have something to do with asynchronous programming(which I still don't fully understand). Sorry I'm a bit of a JS noob, but if you guys could explain to me what I'm doing wrong and what might be a better solution that would be awesome! Thanks.

function Goal(name) {
this.gDiv = document.createElement('div'); = name || "goal";
this.tasks = document.createElement('ul');
//Sets the styling and content and adds it to the parent element
this.initialize = function() {
this.gDiv.className = "default";
this.gDiv.innerHTML =;

this.gDiv.parentNode.insertBefore(this.tasks, this.gDiv.nextSibling); = "none";

//Creates a list underneath the a dive associated with the Goal object
this.addTask = function(task) {
var newLi = document.createElement('li');
newLi.innerHTML = task;

this.gDiv.addEventListener('click', function(){


Thank you guys! You all answered my question! I'd been scratching my head at this for a while. Kudos to you all!


The scope changes when you enter that anonymous closure and 'this' changes. You can hack around it by doing

var self = this;

And then using self in place of this (eg):

function Goal(name) {
    var self = this;

    /* ... */

    this.gDiv.addEventListener('click', function(){

If you're using jQuery you could do something nicer:

this.gDiv.addEventListener('click', $.proxy(function() {
 }, this));

Either way works just fine.

EDIT: Thanks for the edit suggestion.