title: "ReferenceError: variable is not defined" in Javascript
body: <p>I'm trying to get a simple tripMeter to work using javascript and geolocation. Here's my current code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  
  &lt;script type="text/javascript" src="jLocationV1.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Simple Trip Meter for jLocation&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="tripmeter"&gt;
    &lt;p&gt;
      Starting Location (lat, lon):&lt;br/&gt;
      &lt;span id="startLat"&gt;???&lt;/span&gt;, &lt;span id="startLon"&gt;???&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      Current Location (lat, lon):&lt;br/&gt;
      &lt;span id="currentLat"&gt;???&lt;/span&gt;, &lt;span id="currentLon"&gt;???&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      Distance from starting location:&lt;br/&gt;
      &lt;span id="distance"&gt;0&lt;/span&gt; km
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
  window.onload = function() {
  
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
          var startPos = position;
          document.getElementById("startLat").innerHTML = startPos.coords.latitude;
          document.getElementById("startLon").innerHTML = startPos.coords.longitude;
      }, function(error) {
          alert("Error occurred. Error code: " + error.code);
          // error.code can be:
          //   0: unknown error
          //   1: permission denied
          //   2: position unavailable (error response from locaton provider)
          //   3: timed out
      });
  
      navigator.geolocation.watchPosition(function(position) {
                  document.getElementById("currentLat").innerHTML = position.coords.latitude;
                  document.getElementById("currentLon").innerHTML = position.coords.longitude;
                  document.getElementById("distance").innerHTML =
                  calculateDistance(startPos.coords.latitude, startPos.coords.longitude, position.coords.latitude, position.coords.longitude);
      });
    }
  };
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that the startPos variable is not getting setted, when I test the code I get a "ReferenceError: startPos is not defined". </p>
  
  <p>Note that the calculateDistance function is on a different external js file.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT:</p>
  
  <p>The calculate distance function that's in the external file is the following:</p>
  
  <pre><code>function calculateDistance(lat1, lon1, lat2, lon2) {
      var R = 6371; // km
      var dLat = (lat2 - lat1).toRad();
      var dLon = (lon2 - lon1).toRad(); 
      var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
              Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
              Math.sin(dLon / 2) * Math.sin(dLon / 2); 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
      var d = R * c;
      return d;
  }
  Number.prototype.toRad = function() {
      return this * Math.PI / 180;
  }
  </code></pre>