How do I write a jQuery function so that it returns a value that I can access outside the function? I did something like this but when I tried to access it outside the function, it says "undefined":

$(document).ready(function(){
    function add(y, z) {
        $('p').click(function() {
            x = y + z;
            console.log(x); // shows 3
            return x;
        });     
    }

    var sum = add(1, 2);

    console.log(sum); // shows "undefined"
});

How do I write a jQuery function so that it returns a value that I can access outside the function? I did something like this but when I tried to access it outside the function, it says "undefined":

$(document).ready(function(){
    function add(y, z) {
        $('p').click(function() {
            x = y + z;
            console.log(x); // shows 3
            return x;
        });     
    }

    var sum = add(1, 2);

    console.log(sum); // shows "undefined"
});

• javascript
• jquery
• function
• return-value

Share Improve this question Follow asked Sep 30, 2011 at 14:30 catandmousecatandmouse 11.8k2424 gold badges9595 silver badges158158 bronze badges 2

• why do you have the click event within the function? Also, you do not necessarily need to declare functions within the ready() method. – Tim B James Commented Sep 30, 2011 at 14:39
• I think I'll create another question for that now that I know that the click event is the problem. For now this question is resolved. – catandmouse Commented Sep 30, 2011 at 14:45

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

This should work. Not sure why you added the click event there

$(document).ready(function(){
    function add(y, z) {
        x = y + z;
        console.log(x); // shows 3
        return x;
    }
    var sum = add(1, 2);

    console.log(sum); 
});

function add(y, z) {
   $('p').click(function() {
        x = y + z;
        console.log(x); // shows 3
        return x;
    });   
    return y + z;
}

Simple answer - you can't.

The method registered by .click() is called asynchronously as part of the Javascript event loop.

Your add function has no return value at all.

If instead what you're trying to do is to create a jQuery style utility function, rather than a method that acts on elements, you would do this:

(function($) {
     $.add = function(y, z) {
         return y + z;
     }
})(jQuery);

usage:

var x = $.add(1, 2);

The function, in that case, is an anonymous callback function that is called when the click event occurs. The way you set it up, what function add(x, y) does is create a new handler for click events on

tags.

I don't know why click event is added to the function. It should be handled separately. The code should look like this which makes sense according to me.

$(document).ready(function() {
function add(y, z) {
    var x = y + z; // good to make it local scope
    console.log(x); // shows 3
    return x;
}
var sum = add(1, 2);
document.write(sum); // shows "undefined"
});