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
– PeterMader, Commented Jun 6, 2017 at 15:56
Possible duplicate of What is the scope of variables in JavaScript? — Felix Kling
– Felix Kling, Commented Jun 6, 2017 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
– evolutionxbox, Commented Jun 6, 2017 at 15:57
Possible duplicate of Jquery - Grab Variable from Another Function — Sandman
– Sandman, Commented Jun 6, 2017 at 15:59
They are 2 very different functions. Mine is using object literal @Sandman — breezy
– breezy, Commented Jun 6, 2017 at 16:03

PeterMader · Accepted Answer · 2017-06-06 16:10:28Z

1

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

answered Jun 6, 2017 at 16:10

PeterMader

7,3352 gold badges24 silver badges32 bronze badges

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

1 Comment

breezy Over a year ago

Thanks man! I liked the second answer, I wanted to keep things inside of the object.

Williams Isaac · Accepted Answer · 2017-06-06 16:14:17Z

0

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

answered Jun 6, 2017 at 16:14

Williams Isaac

712 bronze badges

Collectives™ on Stack Overflow

How can I access variable inside another function jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related