Google Chrome crashes, doesn't recognize a variable as the name of a function

Question

the following code works perfect of Firefox but crashes on Chrome, with the following error: Uncaught TypeError: Property 'pos' of object [object Object] is not a function

Here is the code, with comments:

var CantidadMenu = $('div[class^=container_menu_]').length;
var position = $("#menu_unidades").position();
var IzAdd = 0;
var w = $("#menu_unidades").width();
var h = $("#menu_unidades").height();
for (i=0;i<CantidadMenu;i++){
    var pos = 'pos'+(i+1); //I create a variable that will hold a string like: pos1,pos2...
    IzAdd = IzAdd+25;
    function pos(div){ //on this line I use the variable I created, which crashes on Chrome
        var estilo1 = $(div).css({'left':IzAdd+25,'top':position.top+(IzAdd-25)});
        return estilo1;
    }
    pos('.container_menu_'+(i+1));
    $('.container_menu_'+(i+1)).css({'z-index':297+i,'width':w,'height':h});
}

Answer 1

Here you define a function named pos:

function pos(div){ //on this line I use the variable I created, which crashes on Chrome
    var estilo1 = $(div).css({'left':IzAdd+25,'top':position.top+(IzAdd-25)});
    return estilo1;
}

console.log(pos) // function ....

Here you overwrite it with a string:

var pos = 'pos'+(i+1);

console.log(pos) // string....

You should name either the function or the string to something else.

PS: I know that in your code the order is reversed, but function declarations are hoisted to the top of the scope, so the JS interpreter "sees" them in the order i wrote them in: first function, then the string.

PSS: The crash is actually on this line:

pos('.container_menu_'+(i+1));

Answer 2

function pos(div) is the same as var pos = function(div)... (except the former is defined at the parse-time, and the latter at the run-time, but that's irrelevant for your code), so if you expected by defining that pos = 'pos1'; , for example, you'd get function pos(div) to become function pos1(div) , it won't .

It will just overwrite the pos variable, and it will no longer be a string, but a function.

To fix your code, write a single function at the top of your code, outside of the for loop, add another parameter to it ( IzAdd ) and make sure you fix the function calls appropriately.

The function should look something like this:

function pos(div, IzAdd){
    return $(div).css({'left':IzAdd+25,'top':position.top+(IzAdd-25)});
}