javascript return value is always undefined
<p>I'm trying to retrieve the 2 attributes of seprated function and I debug there values before the end of the function and they have a value but the return value is alwas undifined I don't know why !! </p>

<p>the .js file </p>

<pre><code>function STAAPlanlat(){
  alert ("the function");

  if (navigator.geolocation) {
    //we supposed to call the handlers of the expections 
    navigator.geolocation.watchPosition(function(position) {
      alert("show position ");
     //  x.innerHTML="Latitude: " + position.coords.latitude +"&lt;br /&gt;Longitude: " + position.coords.longitude;  
      var lat=position.coords.latitude;
      var lan=position.coords.longitude;    

      //x.innnerHTML=out
      alert(lat+"&lt;"+lan);
      return lan;
    });

  } else {
    alert("error");
  }
}
</code></pre>

<p>I got the alert with the values of the lan and lat </p>

<p>but when I call on separated file it return undefined return value</p>

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
     &lt;script type="text/javascript" src="STAAP1.2.js"&gt; &lt;/script&gt;

 &lt;script type="text/javascript"&gt;
     function test(){
     var out=STAAPlanlat();     
     document.getElementById("STAAPlanlat").value = "lan is"+out;
     //document.writeln("lan is"+out);
     }
     &lt;/script&gt;  
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p id="STAAPlanlat"&gt;Test the division&lt;/p&gt;
 &lt;button onclick="test()"&gt;STAAPlanlat()&lt;/button&gt;
 &lt;button onClick="alertme()" &gt;Alert&lt;/button&gt;

 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>
