ReferenceError: function is not defined in Firefox

Question

When I try to load this script in Firefox, it gives me this error: Reference Error: onListFriends is not defined.

The code works fine in Safari and Chrome.

listFriends(onListFriends);

function onListFriends() {
    console.log("friends were listed.");
    setOnline();
}

And here is the listFriends function defined later in the file:

function listFriends(callback) {
    FB.api(
        "me/friends",

    function (response) {
        console.log("Got FB.api response");
        var numOnline = 0;
        var numFriends = response.data.length;
        for (var i = 0; i < numFriends; i++) {
            isOnline(i, response.data, gotOnline);
            var callbackInc = 0;

            function callbackIfYouCan(callback) {
                callbackInc++;
                if (callbackInc == numFriends) {
                    interiorCallback(callback);
                }
            }

            function gotOnline(res, ind, data) {
                console.log("Got response from isOnline: " + res);
                var id = data[ind].id;
                var checkbox = document.createElement('input');
                checkbox.type = "checkbox";
                checkbox.name = "friends";
                checkbox.id = id;
                checkbox.value = data[ind].name;
                console.log("For user " + checkbox.value);
                var label = document.createElement('label');
                label.htmlFor = id;
                label.appendChild(document.createTextNode(data[ind].name));
                if (res == 1) {
                    document.getElementById("online").appendChild(checkbox);
                    document.getElementById("online").appendChild(label);
                    document.getElementById("online").appendChild(document.createElement('br'));
                    numOnline++;
                } else {
                    document.getElementById("offline").appendChild(checkbox);
                    document.getElementById("offline").appendChild(label);
                    document.getElementById("offline").appendChild(document.createElement('br'));
                }
                callbackIfYouCan(callback);
            }
        }

        function interiorCallback(callback) {
            if (numOnline > 0) {
                var textField = document.createElement('input');
                textField.setAttribute('type', 'text');
                textField.id = "message";
                textField.value = "I would like to hang out at this place in 15 minutes.";

                var button = document.createElement('button');
                button.setAttribute('type', 'button');
                console.log("Created tagging button.");
                button.onclick = function () {
                    console.log("Tagging button pressed.");
                    getIdsFromCheckboxes();
                }
                button.innerHTML = "Tag your friends.";

                document.getElementById("online").appendChild(textField);
                document.getElementById("online").appendChild(button);
            }
            callback();
        }
    });

}

What is the difference between the way Firefox and Chrome loads this code? Any help would be appreciated.

Just these two pieces of code are not enough to cause an error: http://jsfiddle.net/qd9aexqn/ More info is necessary — Zirak, Oct 14 '14 at 11:28

score -2 · Accepted Answer · answered Oct 12 '14 at 17:46

-2

JS interpretor read script line by line. In your case, when you transmit onListFriends like a callback, interpretor doesn't know there declaration.

So ... switch your function declaration and listFriends call:

function onListFriends() {
    console.log("friends were listed.");
    setOnline();
}  
listFriends(onListFriends);

answered Oct 12 '14 at 17:46

Thibault Bach

558
5
8

1

The reason this is only happening in Firefox is that Firefox isn't performing "hoisting" of variables and functions to the top of where they were defined. – HeadCode Oct 12 '14 at 17:53
You don't have any another errors ? :O – Thibault Bach Oct 12 '14 at 18:28
3

Sorry, this is wrong. Any spec complicant javascript engine (Spidermonkey included) does function declaration hoisting - see [this question](http://stackoverflow.com/q/7609276). – Zirak Oct 14 '14 at 11:21
We occasionally run into this with Firefox. We just had a problem with an if stmt that called foo() on both branches. foo() was defined, nested, just below the 'if'. One branch worked, the other gets ReferenceError. – Chris Jan 13 '16 at 16:02
I don't really understand why this was downvoted. I had the exact same issue, moved around my function call and it worked. It does seem like Firefox handles this in an odd way. – dijon Jun 13 '16 at 16:34

ReferenceError: function is not defined in Firefox

1 Answers1