How can I get the array outside the function?

Question

$("#div").click(function(){
 $('#myselect').change(function() {
     var names = [];
     $('.checkbox input').each(function() {
           if(this.value != ''){
                 names.push(this.value);
                }
             });
     console.log(names);
  });
});

I need to use the names outside that function to use it on another function. Can anyone tell me how to do it?

$("#dropdown").change(function(){
  console.log(names);
});

names is an array.

Answer 1

Define "names" outside the function...

var names = [];

    $('#myselect').change(function() {

         $('.checkbox input').each(function() {
               if(this.value != ''){
                     names.push(this.value);
                    }
                 });
         console.log(names);
      });

Answer 2

You should call the other function from that change-event handler. Defining the array outside of it would make no sense, it is bound to that event.

function gotNewNames(names) {
    // do something every time the value changes
}

$("#div").click(function(){
    $('#myselect').change(function() {
        var names = [];
        $('.checkbox input').each(function() {
            if(this.value != ''){
                names.push(this.value);
            }
        });
        gotNewNames(names);
    });
});

If you just need to be able to get the current values somewhere else, you should declare the variable in an higher scope, eg in the click handler:

$("#div").click(function(){
    var names;
    $('#myselect').change(function() {
        names = []; // don't forget to reset before filling
        $('.checkbox input').each(function() {
            if(this.value != ''){
                names.push(this.value);
            }
        });
    });
    $("#dropdown").change(function(){
        console.log(names);
    });
});

Answer 3

You mean like this:

Please let me know if I missed anything.

Otherwise hope this helps,

Code

 var names = []; // Move the name array to outer scope 

 $("#div").click(function(){

    $('#myselect').change(function() {

        $('.checkbox input').each(function() {
            if(this.value != ''){
                names.push(this.value);
            }
        });
        console.log(names);
    });

    alert(names);
});