Javascript: Return a variable after firing a function for use

Question

Forgive me if this is a very basic question, but I'm hoping someone here can explain it very clearly for a beginner to JS.

I noticed that I've used the same code in two places and therefore made a function to fire. But I want to use a variable that I created in this function to use after it's been completed. Here's a code example:

function calculate_animation(direction) {
    var theWidth = parseInt(visibleArea.outerWidth() - 70),
        currentMargin = parseInt(listingsSlider.css('margin-left')),
        hoursVisible = Math.floor(theWidth / itemWidth),
        hoursWidth = itemWidth * hoursVisible,
        newMargin = currentMargin - hoursWidth;
}


forwardBtn.click(function () {
    calculate_animation();

    // animate the slider
    listingsSlider.animate({
        'margin-left': newMargin + 'px'
    });
});

So I created a new variable called newMargin in the calculate_animation function, and I'm trying to use it in the animate function below.

What do I need to do to make this happen?

Simon · Accepted Answer · 2012-09-10 16:06:04Z

You need the return keyword in your function...

function calculate_animation(direction) {
        var theWidth        =  parseInt(visibleArea.outerWidth() - 70),
            currentMargin   = parseInt(listingsSlider.css('margin-left')),
            hoursVisible    = Math.floor(theWidth / itemWidth),
            hoursWidth    = itemWidth * hoursVisible,
            newMargin       =  currentMargin - hoursWidth;

        return newMargin;
}


forwardBtn.click(function () {
        var newMargin = calculate_animation();

        // animate the slider
        listingsSlider.animate({'margin-left' : newMargin + 'px'});
});

Selvakumar Arumugam · Accepted Answer · 2012-09-10 16:06:12Z

It is a scope issue. The newMargin variable is defined inside the function and so the scope of the variable begins at the beginning of the function where it defined with var keyword and ends at the end of the function.

You can use return newMargin to return the calculated value back to the caller.

See below,

function calculate_animation(direction) {
        var theWidth        =  parseInt(visibleArea.outerWidth() - 70),
            currentMargin   = parseInt(listingsSlider.css('margin-left')),
            hoursVisible    = Math.floor(theWidth / itemWidth),
            hoursWidth    = itemWidth * hoursVisible,
            newMargin       =  currentMargin - hoursWidth;

        return newMargin;
}


forwardBtn.click(function () {
        // animate the slider
        listingsSlider.animate({'margin-left' : calculate_animation() + 'px'});
});

Nice, I didn't know you could put the function name calculate_animation() in place of a variable. Thanks.

Sushanth -- · Accepted Answer · 2012-09-10 16:06:14Z

You need to return it to the function which is called and use that variable in the called function..

function calculate_animation(direction) {
    var theWidth = parseInt(visibleArea.outerWidth() - 70),
        currentMargin = parseInt(listingsSlider.css('margin-left')),
        hoursVisible = Math.floor(theWidth / itemWidth),
        hoursWidth = itemWidth * hoursVisible,
        newMargin = currentMargin - hoursWidth;
    return newMargin;
}


forwardBtn.click(function () {
    var newMargin = calculate_animation();

    // animate the slider
    listingsSlider.animate({
        'margin-left': newMargin + 'px'
    });
});

Shmiddty · Accepted Answer · 2012-09-10 16:08:01Z

You can simply return it: (What's the direction parameter for? You aren't using it anywhere)

function calculate_animation(direction) {
        var theWidth        =  parseInt(visibleArea.outerWidth() - 70),
            currentMargin   = parseInt(listingsSlider.css('margin-left')),
            hoursVisible    = Math.floor(theWidth / itemWidth),
            hoursWidth    = itemWidth * hoursVisible,
            newMargin       =  currentMargin - hoursWidth;

        return newMargin;
}


forwardBtn.click(function () {
        var newMargin = calculate_animation();

        // animate the slider
        listingsSlider.animate({'margin-left' : newMargin + 'px'});
});

I'll be using direction later for something else. Thanks for spotting though :)

Vivek S · Accepted Answer · 2012-09-10 16:05:24Z

1

You can return from that function, instead you declare the variable globally and change its value whenever required.

answered Sep 10, 2012 at 16:05

Vivek S

5,5708 gold badges57 silver badges74 bronze badges

Collectives™ on Stack Overflow

Javascript: Return a variable after firing a function for use

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Related