Passing variables to function in JavaScript

Question

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()">

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

you never defined marker1 anywhere so how does it know what to pass? You never told it what the variable marker1 is. If you are trying to send a string to your function then it needs quotes around it: <div id="searchresult" onmouseover="changeMarker('marker1')"> — Chad
– Chad, Commented May 19, 2011 at 14:28
Is marker1 defined global? Is it in a script tag that comes before the div tag? — Aravindan R
– Aravindan R, Commented May 19, 2011 at 14:47
yes marker1 and the changeMarker function is defined within script tag that is in the head... how do I make marker1 global? — Nyxynyx
– Nyxynyx, Commented May 19, 2011 at 14:55
marker1 is defined within the initialize() function, which is called <body onLoad="initialize()"> — Nyxynyx
– Nyxynyx, Commented May 19, 2011 at 14:55

Quentin · Accepted Answer · 2011-05-19 15:20:13Z

1

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.

answered May 19, 2011 at 15:20

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nyxynyx Over a year ago

i tried dropping the 'var' as u suggested and got the error 'Uncaught ReferenceError: Google is not defined'...

Quentin Over a year ago

I'd have to see the entire code to figure out why that was happening. Go with the approach I said was better in the first place. Use JS to attach event handlers.

Nyxynyx Over a year ago

I tried adding the following code inside initialize(): document.getElementById("searchresult").onmouseover= function() {changeMarker(marker1);} I get the error: Uncaught ReferenceError: Google is not defined

Nyxynyx Over a year ago

When I use the following it works: document.getElementById("searchresult").onmouseover= function() {location.href="page2.htm";}

Bill Lynch · Accepted Answer · 2011-05-19 15:02:19Z

0

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>

edited May 19, 2011 at 15:02

answered May 19, 2011 at 14:47

Bill Lynch

82.3k16 gold badges132 silver badges181 bronze badges

7 Comments

Nyxynyx Over a year ago

will it work if i make the marker1 variable global? how do i make it global?

Bill Lynch Over a year ago

I added an additional piece of code. I'm not great at javascript, so there may be a nicer way of doing that, but I've included a simple way.

Nyxynyx Over a year ago

I tried that and I get the error: Uncaught ReferenceError: Google is not defined

Bill Lynch Over a year ago

This is likely a different problem. Perhaps you are not loading the google jsapi properly?

Nyxynyx Over a year ago

I got rid of the Google error... its because I capitalised google in the changeMarker function

|

lance · Accepted Answer · 2011-05-19 14:28:41Z

0

I think this will help:

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

answered May 19, 2011 at 14:28

lance

16.4k20 gold badges80 silver badges139 bronze badges

1 Comment

lance Over a year ago

I assumed (incorrectly?) it existed in code the author didn't share.

Collectives™ on Stack Overflow

Passing variables to function in JavaScript

3 Answers 3

4 Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related