How To Pass Local Variables When Assigning Mouseover Via Anonymous Function?

I have a setup function that runs onload to add some behaviours to elements. The setup function passes arguments to the mouseover event but those arguments are being changed during

Solution 1:

Try surrounding the contents of your for loop in a closure:

for (var lot_id in lots) {
    (function(lid){
        //contents of for loop - use lid instead of lot_id    
    })(lot_id);
}

let me know how that works out

EDIT: You don't have to surround the whole loop actually, you could just surround the line that attaches the event:

(function(lid){
    area.onmouseover = function(){ showLot(lid, area, coords, details, image, map, areas, lots) };
})(lot_id);

However surrounding the whole loop may prevent future bugs arising :)

Solution 2:

You need to create a closure around your function. Something like this might help:

functionmakeShowLot(lot_id, area, coords, details, image, map, areas, lots) {
  returnfunction () { 
      showLot(lot_id, area, coords, details, image, map, areas, lots);
    };
}

Then, do this instead:

area.onmouseover = makeShowLot(lot_id, area, coords, details, image, map, areas, lots);

makeShowLot is a function that returns a function. That function that is returned takes no arguments; all of the arguments needed for showLot are enclosed in this anonymous function.

Solution 3:

As you correctly observed because of closure, 'lot_id' is captured and it's the same for all mouseover events. Fixing the problem is simple, before you assign onmouseover, store the lot_id in another local var, say lotIdForMouseOver, and pass that to the mouseover function. The new local var thing will work in C#, not in JavaScript. At work, I do lot of C# and hence the confusion!

Like pkaeding suggested, create a helper function and you should be good.

On a side note, if you 'inverse' your 'if' checks, you can get rid of the nested ifs. IMHO, nested if's are very difficult to follow.

Here's how I would do it.

functionsetupAreas(image, map, lots)
{
    // existing codefor(var lot_id in lots)
    {
        if(lot_id == 'Lot No' || lot_id == '')
            continue;

        var area = document.getElementById(lot_id);

        if(!area || ! area.coords)
        {
            alert('no maps for coords for lot ' + lot_id);
            continue;
        }

        var coords = area.coords.split(",");
        var details = lots[lot_id];

        if(! details)
            continue;

        //makeMouseOver function takes 'n' arguments and returns a function which//will call showLot with those same 'n' arguments.//This is the same suggestion as pkaeding, only that I have exploited 'arguments'//property to make it simpler. var makeMouseOver = function()
        {
            var creationArgs = arguments;
            returnfunction() { showLot.apply(null, creationArgs); };
        }

        area.onmouseover = makeMouseOver(lot_id, area, coords, details, image, map, area, lots);

        // more code.
    }
}