"ReferenceError: variable is not defined" in Javascript

StackOverflow https://stackoverflow.com/questions/23583026

  •  19-07-2023
  •  | 
  •  

Question

I'm trying to get a simple tripMeter to work using javascript and geolocation. Here's my current code:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<script type="text/javascript" src="jLocationV1.js"></script>

<title>Simple Trip Meter for jLocation</title>
</head>
<body>
<div id="tripmeter">
  <p>
    Starting Location (lat, lon):<br/>
    <span id="startLat">???</span>, <span id="startLon">???</span>
  </p>
  <p>
    Current Location (lat, lon):<br/>
    <span id="currentLat">???</span>, <span id="currentLon">???</span>
  </p>
  <p>
    Distance from starting location:<br/>
    <span id="distance">0</span> km
  </p>
</div>
</body>

<script type="text/javascript">
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);
    });
  }
};
</script>

</html>

The problem is that the startPos variable is not getting setted, when I test the code I get a "ReferenceError: startPos is not defined".

Note that the calculateDistance function is on a different external js file.

What am I doing wrong?

Thanks in advance.

EDIT:

The calculate distance function that's in the external file is the following:

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;
}
Was it helpful?

Solution

Variable startPos is defined as local inside 

navigator.geolocation.getCurrentPosition(function(position) {
    var startPos = position;
...

});

It is not visible outside that part of code: 

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);
});

}

and you get error:

Uncaught ReferenceError: startPos is not defined

startPos variable has to be defined at beginning of onload function:

window.onload = function() {
    var startPos;

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            //var startPos = position;
            startPos = position;
        ...
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top