JS scope: accessing variable

Question

I know this question has been asked many times, but in different forms. I want to access the selected variable elsewhere within the scope of the topmost function (alert is currently returning undefined). I know I need to use a return in some way or another. Thank you in advance.

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

  var selected;

  $('li a', $('#suggestions')).bind('click.autocomplete',function(){ 
    selected = ($(this).text());
  });

  alert(selected);

}

score 4 · Answer 1 · answered Jun 24 '13 at 15:27

4

This doesn't make any sense. The li a hasn't been clicked yet, when the alert happens. The alert will always show undefined, the code to assign a value to selected has not run, and may never run.

If you want to alert the value, you need to do so at the time the li a is actually clicked:

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

  var selected;

  $('li a', $('#suggestions')).bind('click.autocomplete',function(){ 
    selected = ($(this).text());
    alert(selected);
  });


}

answered Jun 24 '13 at 15:27

user229044

232,980
40
330
338

ok, but if i want to pass this value to another function outside of '.bind', what is the best way to do that? – po.studio Jun 24 '13 at 15:31
@PaulOsetinsky Move that code inside the event handler, where I've placed the `alert`. – user229044 Jun 24 '13 at 15:32

Patrick · Accepted Answer · 2013-06-24T16:14:20.660

Meagar is correct, however I find that sometimes it helps to write the function elsewhere, that way I am keeping the event handler clean.

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

  var selected, myClickHandler;

  myClickHandler = function(){
    selected = ($(this).text());
    alert(selected);
  };

  $('li a', $('#suggestions')).bind('click.autocomplete', myClickHandler);

}

Edit: Or if you want to pass the selected value to another function elsewhere...

  myClickHandler = function(){
    selected = ($(this).text());
    showMyAlert(selected);
  };

...

function showMyAlert(selected){
  alert(selected);
}

JS scope: accessing variable

2 Answers2