Reference error geolocation

Question

I am trying to use geolocation in javascript. However, on my console i see an error which is: ReferenceError: success is not defined. As a result i am unable my code is unable to execute the rest of the function. Here is my implementation:

function clicked(){

        console.log("inside clicked");

        if($("#checkbox-h-2j").prop('checked')){

            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(success,error);
            }

            else{
                document.getElementById("hello").innerHTML = "Not supported";
            }

            function success(position){

                    lat = position.coords.latitude;
                    lng = position.coords.longitude;
                    document.getElementById("hello").innerHTML = "lat :"+lat+"<br>long :"+lng;
            }

            function error(err){
                    document.getElementById("hello").innerHTML = "Error Code: "+error.code;
                    if(err.code == 1){
                        document.getElementById("hello").innerHTML = "Access denied";
                        }
                    if(err.code == 2){
                        document.getElementById("hello").innerHTML = "Position unavailable";
                    }
            }
}}

score 1 · Answer 1 · answered Jul 27 '14 at 15:20

1

Is the reference error is in line no 08 ie .

navigator.geolocation.getCurrentPosition(success,error);

if so then the problem may be that when you use success, this function get used before getting defined,hence it stops the further execution, try to define the function before using it, then it will work.

answered Jul 27 '14 at 15:20

Ajit Singh

390
4
14

if you got your answer then why dont you just mark this question as answered so that it no longer remain in the catagory of unanswered. – Ajit Singh Jul 27 '14 at 15:26

Felix Kling · Answer 2 · 2014-07-27T15:35:17.490

I assume you are getting the error in Firefox, but not in Chrome. Here is a simpler example:

if (true) {
    foo();
    function foo() {
        console.log('bar');
    }
}

The problem is that you are using a function declaration inside a block. That is actually a syntax error, but browsers choose different ways to deal with this.

Chrome will hoist the function declaration (like any other function declaration), so that the result is

function foo() {
   console.log('bar');
}
if (true) {
    foo();
}

I.e. the function will always be defined, no matter the result of the condition.

Firefox will treat the declaration as a function expression instead, something like

if (true) {
    foo();
    var foo = function foo() {
        console.log('bar');
    }
}

In this case you would be trying to call the function before it is defined, which of course won't work.

Note: That's not how Firefox really does it, since the above example would generate a type error, not a reference error, but generally it works like this.

For more information on this issue, see the MDN documentation.

Solution:

Inside blocks, always use function expressions, not function declarations. Function expressions have to be defined before they are used. I.e. your code becomes something like

if($("#checkbox-h-2j").prop('checked')){
    var success = function() { ... };
    var error = function() { ... };

    navigator.geolocation.getCurrentPosition(success,error);
}

Reference error geolocation

2 Answers2