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');

        this.name = 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.setAttribute(id, this.name);

            this.gDiv.innerHTML = this.name;

            elem.appendChild(this.gDiv);



            this.gDiv.parentNode.insertBefore(this.tasks, this.gDiv.nextSibling);

            this.tasks.style.display = 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.tasks.appendChild(newLi);

        };



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

            alert(this.tasks);              

        });



    }

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