Javascript function from external file not found

Question

I have the following Javascript file:

function availableHeight() {
    var windowHeight = window.innerHeight;
    var headerHeight = $(".page-header").innerHeight();
    var marginPaddingEtc = 105;
    return windowHeight - marginPaddingEtc - headerHeight;
}

function setMapHeight() {
    availableHeight = availableHeight();
    $("#map").outerHeight(availableHeight);
}

which is named utils.js and is placed inside a js/ folder relative to my HTML file. In the HTML file, I import utils.js like:

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

and use the functions at the end of the body like:

<script>
$(document).ready(function () {
    $("#menu").load("demo_nav.html", function() {
        setMapHeight();
        var availableHeight = availableHeight();
        console.log(availableHeight);
    });
});
</script>

When opening the page in Firefox 44.0.2, I get the following output in the console:

TypeError: availableHeight is not a function


var availableHeight = availableHeight();

What surprises me the most is the fact that setMapHeight() is being found and availableHeight() is not, even though they are in the same file! Since one is found, I know the issue is not with the import. I am calling the functions in $(document).ready() so everything should be loaded by then. I tried renaming the var just in case the declaration was replacing the function, but that didn't solve it either.

I am out of ideas of why this is not working. Can you find anything wrong?

EDIT: ANSWER by Dmitriy Loskutov

setMapHeight() was redefining the global name because it didn't declare its variable with var. I changed it to

function setMapHeight() {
    var myAvailableHeight = availableHeight();
    $("#map").outerHeight(myAvailableHeight);
}

and the error went away.

Thanks

Oriol · Accepted Answer · 2016-03-11 20:52:08Z

3

The local availableHeight variable is hoisted to the top of its function, shadowing the global one.

Before you assign some value, it has the default undefined value. But undefined is not a function, so you can't call it.

Your code becomes something like

function availableHeight() { /* ... */ }
(function () {
  var availableHeight = undefined; // Local variable hoisted to the top
  availableHeight = availableHeight(); // TypeError (can't call undefined)
})();

edited Mar 11, 2016 at 20:52

answered Mar 11, 2016 at 20:47

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gamda Over a year ago

This would be fixed by renaming the local variable, correct? I already tried changing the name of the local var and it didn't fix it :(

gamda Over a year ago

Renaming doesn't fix it. What else could it be? TypeError: availableHeight is not a function var somethingElse = availableHeight();

Oriol Over a year ago

@gamda Are you sure there is no other availableHeight somewhere else? What happens if you use console.log(availableHeight) in that function and just after the external script?

Dmitriy Over a year ago

check your setMapHeight function in utils.js, you redefine global variable availableHeight too

gamda Over a year ago

@DmitriyLoskutov thank you, you were right. Changing the name inside setMapHeight worked!

|

Collectives™ on Stack Overflow

Javascript function from external file not found

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related