Passing variables to function in JavaScript

I have the following code in the body

<div id="searchresult" onmouseover="changeMarker(marker1)">

and the following in the head

function changeMarker(marker) {
    alert(marker);
}

Now when i mouseover the div, I get the following error in the javascript console

Uncaught ReferenceError: marker1 is not defined

If I have the following instead, where the function does not take variables, the alert box is called.

function changeMarker() {
    alert('hi');
}

<div id="searchresult" onmouseover="changeMarker()"&g开发者_如何转开发t;

Did I make a mistake somewhere?

EDIT

I forgot I defined marker1 within initialize() as follows (I'm using google maps v3 api)

var marker1 = new google.maps.Marker({  

                position: new google.maps.LatLng(1.288693,103.846733),

                map: map,

                icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff"

            });

This is the rest of the code I'm really using:

<div id="searchresult" onmouseover="changeMarker(marker1)">

and the function is

function changeMarker(marker) {
            var icon = new Google.maps.MarkerImage({ url:"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200"});
            marker.setIcon(icon);
        }

I get the same error: Uncaught ReferenceError: marker1 is not defined

I forgot I defined marker1 within initialize()

Then it is scoped to initialize and not accessible in the wider scope.

You could drop the var to make it a global, but you would probably be better off assigning your event handler with JS inside initialize instead of using HTML attributes to do it.

This code seems to work properly:

<script>
    function changeMarker(marker) {
        alert(marker);
    }

    var marker1 = 'Test Data';
</script>

<style>
    #searchresult {
        background-color: red;
    }
</style>

<div id="searchresult" onmouseover="changeMarker(marker1)">
    Test Box
</div>

Something like this however, will not work, because marker1's scope is limited to the google callback.

<script>                                                                                     
    function changeMarker(marker) {                                                          
        alert(marker);                                                                       
    }                                                                                        

    google.setOnLoadCallback(function() {                                                    
        var marker1 = 'Test Data';
    });
</script>

To Fix this, you might do:

<script>                                                                                     
    function changeMarker(marker) {                                                          
        alert(marker);                                                                       
    }                                                                                   

    var marker1;

    google.setOnLoadCallback(function() {                                                    
        marker1 = 'Test Data';
    });
</script>

I think this will help:

<div id="searchresult" onmouseover="function(){changeMarker(marker1)}">