Передача переменных в функцию в JavaScript

Question

У меня есть следующий код в теле

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

и следующее в голове

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

Теперь, когда я наведите курсор мыши на div, я получаю следующую ошибку в консоли javascript

Uncaught ReferenceError: marker1 is not defined

Если у меня вместо этого следующее, где функция не принимает переменные, вызывается окно с предупреждением.

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

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

Я где-то ошибся?

EDIT

Я забыл, что я определил маркер1 в initialize () следующим образом (я использую API Google Maps v3)

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"

            });

Это остальная часть кода, который я действительно использую:

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

и функция

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);
        }

Я получаю ту же ошибку: Uncaught ReferenceError: маркер1 не определен

Answer 1

Я забыл, что я определил маркер1 внутри initialize ()

Тогда он ограничен до initialize и недоступен в более широкой области.

Вы можете отбросить var, чтобы сделать его глобальным, но вам, вероятно, лучше назначить обработчик событий с JS внутри initialize вместо использования атрибутов HTML для этого.

Answer 2

Этот код работает правильно:

<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>

---

Как-то так, однако, не будет работать, потому что область действия marker1 ограничена обратным вызовом Google.

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

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

Чтобы исправить это, вы можете сделать:

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

    var marker1;

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

Answer 3

Я думаю, что это поможет:

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