Question

So i have the following structure in my js file:

var scrollingElements = {

    doc_height :    null,
    window_height : null,

    globalVar : {
        init: function() {
            //Get window and document initial heights
            this.doc_height     = $(document).height();
            this.window_height  = $(window).height();
        }
    },

    headerNav : {
        init: function(){
            console.log(this.doc_height);
        }
    },

    quickNavSidebar : {
        init: function(){
            console.log(this.doc_height);
        }
    }

}

$(function(){
    scrollingElements.globalVar.init();
    scrollingElements.headerNav.init();
    scrollingElements.quickNavSidebar.init();
});

However, this code doesn’t work. this.window_height doesn’t reach the right level in the object class. I’m unsure how to get to the higher level in order to store and access the global variables. I think i need to do something like this.parent(), but obviously that doesn’t work :/

Any ideas?

Answer 1

You can’t use this inside the object to refer to the variables like you did. They are properties of the object and inside the object can be accessed directly.
This works for me:

var scrollingElements = {

    doc_height :    null,
    window_height : null,

    globalVar : {
        init: function() {
            //Get window and document initial heights
            doc_height     = $(document).height();
            window_height  = $(window).height();
            console.log(doc_height);
        }
    },

    headerNav : {
        init: function(){
            console.log(doc_height);
        }
    },

    quickNavSidebar : {
        init: function(){
            console.log(doc_height);
        }
    }

}