Problems with javascript scope in firefox

Question

Hello!

<div id="myElement1"></div>
<div id="myElement2"></div>

<script>
window.onload = function() {
    document.getElementById("myElement1").onclick = function() {
        for (i = 0; i < 2; i++) {
            document.getElementById("myElement2").onmouseover = func;
            function func() {alert("hello"); } } } }
</script>

In chrome and IE, when myElement1 is clicked, func is attached perfectly to myElement2. However, in firefox when myElement1 is clicked I receive an error message stating that func is not defined.

I should note that if make an anonymous function instead of func then it works in all 3 browsers.

My question is how does firefox handle scope in this regard differently to IE and chrome?

Will.

Answer 1

I think the issue is that func is being defined inside a block. Try running your code through JSLint and you'll notice the following issues:

• Function statements cannot be placed in blocks. Use a function expression or move the statement to the top of the outer function.
• 'func' was used before it was defined.

Try assigning a function expression instead of defining a function and assigning it by name, perhaps like this:

document.getElementById("myElement2").onmouseover = function() {
    alert("hello")
};

Answer 2

try this:

<script>
window.onload = function() {
    document.getElementById("myElement1").onclick = function() {
        for (i = 0; i < 2; i++) {
            var func = function() {alert("hello");} 
            document.getElementById("myElement2").onmouseover = func;
        } 
    }
}
</script>

Answer 3

I would recommend moving the declaration in front of the assignment, and using a variable to hold the function instead of declaring it globally:

<script>
window.onload = function() {
    document.getElementById("myElement1").onclick = function() {
        for (i = 0; i < 2; i++) {
            var func = function() { alert("hello"); }
            document.getElementById("myElement2").onmouseover = func;
        }
    } 
}
</script>

Answer 4

You have a scope problem because your function definition is within a function. I usually encapsulate functions in an object. You probably don't need the loop too.

Take a look:

<div id="myElement1"></div>
<div id="myElement2"></div>
<script type="text/javascript">

    window.onload = function() {
        document.getElementById("myElement1").onclick = function() {
                document.getElementById("myElement2").onmouseover = myFunctions.func;
         }
     }
    /* Function definitions */ 
    var myFunctions = new Object();
    myFunctions.func = function () {
       alert("hello"); 
    }
</script>

Answer 5

As for "how does firefox handle scope in this regard differently to IE and chrome?" - see http://yura.thinkweb2.com/named-function-expressions/#function-statements