How can I access variable inside another function jquery

Question

I have this object and want to access the variable scrolled var scrolled = 10; from the init function within the scrollDown function.

I am having trouble accessing the variable. How can I achieve this?

// Summary Screen Functions
var summary = {
    init: function() {

        var scrolled = 0;

        $('.page-summary-action a').on('click', summary.continueToSummary);
        $('.scroll-down').on('click', summary.scrollDown);
        $('.scroll-up').on('click', summary.scrollUp);
    },

    scrollDown: function(e) {
        e.preventDefault();
        scrolled = scrolled + 300;

        console.log('clicked');

        $(".data-cards").animate({
            scrollTop:  scrolled
        });
    },

    scrollUp: function(e) {
        e.preventDefault();
        console.log('clicked');

        $(".data-cards").animate({
            scrollTop: 15
        });
    }
};

summary.init();

Put the variable outside of the `summary` object or make it a property of the `summary` object. — PeterMader, Jun 06 '17 at 15:56
Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Felix Kling, Jun 06 '17 at 15:57
Looks like you want the Revealing Module Pattern. Or you need to expose `scrolled` variable using `this.scrolled`, but then you need to initialise the object using `new`. — evolutionxbox, Jun 06 '17 at 15:57
Possible duplicate of [Jquery - Grab Variable from Another Function](https://stackoverflow.com/questions/9676499/jquery-grab-variable-from-another-function) — Sandman, Jun 06 '17 at 15:59
They are 2 very different functions. Mine is using object literal @Sandman — breezy, Jun 06 '17 at 16:03
They are 2 very different functions. Mine is using object literal @FelixKling — breezy, Jun 06 '17 at 16:29

score 1 · Accepted Answer · answered Jun 06 '17 at 16:10

var scrolled = 0; // Put the variable in an outer scope
var summary = {
    init: function() {
        // access "scrolled"
        scrolled = 0;
    },

    scrollDown: function(e) {
        // access "scrolled"
    },

    scrollUp: function(e) {
        // ...
    }
};

summary.init();

or

var summary = {
    scrolled: 0, // Make it a property of the "summary" object
    init: function() {
        // access "scrolled"
        summary.scrolled = 0;
    },

    scrollDown: function(e) {
        // access "scrolled"
    },

    scrollUp: function(e) {
        // ...
    }
};

summary.init();

Thanks man! I liked the second answer, I wanted to keep things inside of the object. — breezy, Jun 06 '17 at 16:29

score 0 · Answer 2 · answered Jun 06 '17 at 16:14

Following your question, you should use this.scrolled instead of var. An example would be

 var summary = {
    init: function() {
        this.scrolled = 20;
    },

    scrollDown: function(e) {
        console.log(this.scrolled);
    },

    scrollUp: function(e) {
        console.log(this.scrolled);
    }
 };   
 summary.init();
 summary.scrollDown();

to satisfy your curiosity, you should look up this link How does the “this” keyword work? and Explanation from MDN

How can I access variable inside another function jquery

2 Answers2