<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.

<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.

• javascript
• firefox
• events
• scope

• 1 What happens if the function declaration is before the event assignment? – Matchu Commented Feb 6, 2010 at 2:12

4 Answers 4

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")
};

As for "how does firefox handle scope in this regard differently to IE and chrome?" - see http://kangax.github./nfe/#function-statements

I would remend 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>

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>