CODEWITHSUNDEEP
javascriptjquery
dotnetnoob
dotnetnoob

Reputation: 11360

Javascript function cannot be found

I have the following code in document.ready()

if ($("#site-master").length > 0) {

    setMinContentHeight();

    function setMinContentHeight() {

        // removed for clarity
    }
}

I simply check if the page is correct (#site-master), then call my minimum height function, however I'm getting the following error in firebug: ReferenceError: setMinContentHeight is not defined.

I'm no javascript expert, but how can this be? The function works if I move it outside of document.ready(). I have checked and the code inside the if statement is reached.

Also, is this the best way of achieving what I want?

Thanks in advance.

Upvotes: 1

Views: 2152

Answers (5)

VisioN
VisioN

Reputation: 145478

Never declare your functions inside if or for statements:

function setMinContentHeight() {
    // removed for clarity
}

if ($("#site-master").length > 0) {
    setMinContentHeight();
}

If we address the ECMAScript specification, according to Chapter 12, if clause is considered to be a Statement (as well as for, while, with, try/catch, etc).

Hence, following the NOTE from Semantics section:

Several widely used implementations of ECMAScript are known to support the use of FunctionDeclaration as a Statement. However there are significant and irreconcilable variations among the implementations in the semantics applied to such FunctionDeclarations. Because of these irreconcilable differences, the use of a FunctionDeclaration as a Statement results in code that is not reliably portable among implementations. It is recommended that ECMAScript implementations either disallow this usage of FunctionDeclaration or issue a warning when such a usage is encountered. Future editions of ECMAScript may define alternative portable means for declaring functions in a Statement context.

It means that we cannot guarantee the consistent behavior in such cases, and, as a result, we will always get exception in strict mode in case if function was declared inside the statement.

Upvotes: 10

Bergi
Bergi

Reputation: 665546

First, read on the difference between var functionName = function() {} and function functionName() {} to understand function declarations vs expressions. Now what do you have? Nothing of the two, since function declarations need to be on the top level of function/script code - nesting them in blocks is not allowed. It's called a function statement, is nonstandard and working differently.

Put it outside the if-block:

// here
if ($("#site-master").length > 0) {
    setMinContentHeight();
}
// or here:
function setMinContentHeight() {
    …
}

Upvotes: 4

dsgriffin
dsgriffin

Reputation: 68626

Place the call after you've defined the function and don't define functions inside an if block: 

function setMinContentHeight() {
    // removed for clarity
}

if ($("#site-master").length > 0) {
    setMinContentHeight();
}

Upvotes: 2

karaxuna
karaxuna

Reputation: 26940

Maybe you have problems with browser compatibility, but it works like this:

right:

n();
function n(){ alert('1'); }

wrong:

n();
var n = function(){ alert('1'); }

Upvotes: 0

Brad M
Brad M

Reputation: 7898

if ($("#site-master").length > 0) {
    setMinContentHeight();
}
function setMinContentHeight() {
        // removed for clarity
}

You need to declare your function in the global scope.

Upvotes: 3

Related Questions