All my code is being overwritten by the last section

Question

We have a map which uses polygons to create overlays on top of countries. When a user hovers over a country the polygons change color.

When the mouse leave the country it changes back (or at least we want it to)

Us the code below what happens is that that both countries access the settings for JUST the last section of code. It seems all other code is overwritten.

I don't know which variable to make unique.

for(var i = 0; i < germany.length; i++){
    addListener( germany[ i ], germany );
    }
function addListener( germany_item, tweened )
{   
    google.maps.event.addListener(germany_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
    });
    google.maps.event.addListener(germany_item, "mouseout",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#5EA9BD", strokeColor: "#5EA9BD" });
    });
}//
for(var i = 0; i < france.length; i++){
    addListener( france[ i ], france );
    }
function addListener( france_item, tweened )
{   
    google.maps.event.addListener(france_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        });
    google.maps.event.addListener(france_item, "mouseout",function() {    
                    for( var i in tweened ) 
            tweened[ i ].setOptions({ fillColor: "#006886", strokeColor: "#006886" });
        });

jfriend00 · Accepted Answer · 2011-07-27T21:14:37.127

You cannot have two functions with the same name (you have two copies of function addListener()). If you do that, then only the last one will be active (which is what you were experiencing). I would suggest you either change the name of both functions to addListenerGermany() and addListenerFrance() or replace them both with one function and pass in the minor difference between the two as a parameter so you can serve both need with one block of code.

For example, you could change it all to this:

for (var i = 0; i < germany.length; i++) {
    addListenerCommon( germany[ i ], germany , "#5EA9BD", "#5EA9BD");
}

for(var i = 0; i < france.length; i++) {
    addListenerCommon( france[ i ], france, "#006886", "#006886" );
}

function addListenerCommon(item, tweened, fill, stroke ) {   
    google.maps.event.addListener(item, "mouseover",function() {
        for( var i in tweened ) {
            tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        }
    });
    google.maps.event.addListener(item, "mouseout",function() {
        for( var i in tweened ) {
            tweened[ i ].setOptions({ fillColor: fill, strokeColor: stroke });
        }
    });
}

If you're going to add more countries, then you can make a function for the for loop:

function initCountry(country, fill, stroke) {
    for (var i = 0; i < country.length; i++) {
        addListenerCommon(country[i], country, fill, stroke);
    }
}

initCountry(germany, "#5EA9BD", "#5EA9BD");
initCountry(france, "#006886", "#006886");
initCountry(australia, "#FF6886", "#FF6886");

and so on...

I see. so this will work and allow me to add more countries buy just adding another for(var i = 0; i < france.length; i++) { addListenerCommon( france[ i ], france, "#006886", "#006886" ); } ? — Donna-C sharp, Jul 27 '11 at 21:09
@Donna-C sharp - yes. See the part I just added to my answer that shows how you could even make the for loop into a function. — jfriend00, Jul 27 '11 at 21:11

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

See this related question. Using the function myFunction() syntax defines a function at parse time, not at run time, so the last declaration will overwrite the first. You can fix this by using var myFunction = function() syntax, which is defined at runtime:

var addListener = function( germany_item, tweened ) { ... };
addListener(germany);
var addListener = function( france_item, tweened ) { ... };
addListener(france);

edited May 23 '17 at 12:04

Community

1
1

answered Jul 27 '11 at 20:57

nrabinowitz

55,314
10
149
165

While this is technically doable, I wouldn't recommend it. I'd say it's much better to not confuse things with two functions named the same thing and/or combine the two functions into one block of code that accomplishes the task for both since each function is nearly the same. – jfriend00 Jul 27 '11 at 21:08
@jfriend00: Agreed - I suppose I was answering the question, not the need. – nrabinowitz Jul 27 '11 at 22:13

All my code is being overwritten by the last section

2 Answers2