Can't assign a string to another string in an onchange = function()

Question

I have this:

<select id="prio" class="w60">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

If i select another value, an onchange = function() is called:

var prio = document.getElementById('prio');
var string1 = "Hello";
var string2 = "";

    prio.onchange = function () 
    {
        prioIndex = prio.options[prio.selectedIndex].text;
        switch (prioIndex) 
        {
           case '1': prioIndex = " my Friend";
                     break;
           case '2': prioIndex = " my Sister and Brother";
                     break;
           case '3': prioIndex = " my Mom and Dad";
                     break;
         }
       alert(prioIndex);
       string2 = prioIndex;
     }


alert(string2);

The alert inside the function works fine but he will not assign the new String.

alert(string2) shows string2 (undefined).

I want to use string2 outside the function. But i can't because it is never assigned. But I dont know why.

Lets say, i want to use string2 in another onchange function...

var string3;
news.onchange = function () 
{ 
   string3 = string2.concat(' how are you');
   alert(string3);
}

and assign it to string3. if I want to use string3 outside the onchange-function it is undefined.

Answer 1

JavaScript has what we call as 'callbacks'. A callback is a function executed once an action happens on the element where callback is set. Thus your onchange function will be executed only when you change your prio element on your HTML page.

That means your prio.onchange = function () { ... } won't execute unless you go to your HTML page, click on your select element AND CHANGE its value.

Thus what will be execute once that code loads into your browser is the following (it's not fully right but will help you understand why your string2 is not assigned as you are expecting):

var prio = document.getElementById('prio');
var string1 = "Hello";
var string2 = "";
alert(string2);

Can you see the problem? Right!!! string2 is empty when alert(string2) is called! :D

You could do what you want by passing your string2 to another function from within your callback such as following:

var foo = function ( val ) {
  alert('string2 value is: ' + val);
};

prio.onchange = function () {
  prioIndex = prio.options[prio.selectedIndex].text;

  switch (prioIndex) {
    case '1': prioIndex = " my Friend";
              break;
    case '2': prioIndex = " my Sister and Brother";
              break;
    case '3': prioIndex = " my Mom and Dad";
              break;
  }

  foo(prioIndex);
}

However if you want to use that information in two different callbacks you could define a function to get that value whenever you need it. I mean:

var string2 = function () {
  var prio = document.getElementById('prio');
  prioIndex = prio.options[prio.selectedIndex].text;

  switch (prioIndex) {
    case '1': prioIndex = " my Friend";
              break;
    case '2': prioIndex = " my Sister and Brother";
              break;
    case '3': prioIndex = " my Mom and Dad";
              break;
  }

  return prioIndex;
}

var string3;
news.onchange = function () { 
  string3 = string2() + ' how are you';
  alert(string3);
}