How to get a value out of a JavaScript function?

Question

I need to get the row number out of a JavaScript function:

function cap_check(){
    var row;

    $('td').change(function(){ 
        row = $(this).parent().parent().children().index($(this).parent());  
        alert(row);
    }); 

    alert(row);
}

Within the function, row is correctly alerted. Outside of the function, it is undefined.

Answer 1

There's no way that calling cap_check will ever alert anything other than undefined. A function is not a static object. When you call a function, it creates a new instance on the internal stack. row will be initialized as undefined and a new click handler will be bound to td elements (also not likely to be useful - as another duplicate event handler will be bound each time you call cap_check).

Most likely, you want something like this:

var cap_check=(function() {
    var row;
    $('td').change(function(){ 
        row = $(this).parent().parent().children().index($(this).parent());  
        alert(row);
    }); 
    return function() {
       alert(row);
    };
}());

This is a self-executing function. When the script runs, the part of the function BEFORE the "return" is executed immediately, creating your event binding once, and returning a function that references the original function instance. This creates a closure which means that the function maintains a reference to the objects of it's parent (in this case, the row variable). So your event handler, and the function returned as cap_check, now will always refer to the same instance of row.

So - now any code that calls cap_check will always return the same value assigned as a result of the change event.

Fiddle:

http://jsfiddle.net/RagUe/5/

(Note that I changed the event to "click" instead of "change" to make it easily testable).

Answer 2

$('td').change(function(){ })

Change allows you to pass a callback that will run whenever the value changes.

So just by attaching the callback it wont run it. It will only run when the value changes. Since the rest of the function runs before the value changes the value of row is undefined.

Simply place the rest of the script in the callback

Answer 3

Shouldn't you keep the remainder of the function within the change function?

function cap_check(){
     var row;
             //-----------------------Jquery current table row  
     $('td').change(function(){ 
           row = $(this).parent().parent().children().index($(this).parent());  

           //rest of script here
         }); 

 }

Answer 4

Your row inside the function is in a completely different scope then the row outside.

So when you are outside of the change() function row is undefined, but as soon as change is triggered, row gets a value

function cap_check(){
    var row;

    $('td').change(function(){ 
        row = $(this).parent().parent().children().index($(this).parent());  
        alert(row); //only has a value on change
    }); 

    alert(row); //undefined
}