值未從html格式傳遞到Javascript，變量記錄未定義，為什么？

Question

我正在嘗試為班級制作一個小型站點，該站點將根據下拉選擇來更改地圖。 因為我對lat和long值進行了硬編碼，所以第一個地圖可以很好地彈出，但是當您使用下拉框時，這些值會返回未定義狀態。 我不認為它正確地通過了，我不知道為什么。

 <!DOCTYPE HTML>
<head>
    <meta charset='utf-8'>
    <link href ='style.css' rel='stylesheet' />
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=[hidden]"></script>

    <title>Geolocation</title>
</head>
<body>
    <div id="map"></div>
    <div id="formArea">
        <form>
            <h1>Famous Cities</h1>
            <fieldset>
                <label>Cities</label>
                <select id="selectedCity" name="selectedCity">
                    <option value='None'>Please select a city from the dropdown</option>
                    <option value='ITA'>Rome, Italy</option>
                    <option value='FRA'>Paris, France</option>
                    <option value='USA'>New York, USA</option>
                </select>
            </fieldset>
        </form>
    </div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src='script.js'></script>
</body>
</html>

JS文件在下面

var map;

function initMap() {
        var mapDisplay = document.getElementById('map');
        var mapOptions = {
            center: new google.maps.LatLng(40.7484,-73.9857),
        zoom: 8
        };
        map = new google.maps.Map(mapDisplay, mapOptions);

        console.log('now exiting initMap');
}


var coordsLat = {
    'ITA':41.9028,
    'FRA':48.8566,
    'USA':40.7128,
};

var coordsLng = {
    'ITA': 12.4964,
    'FRA': 2.3522,
    'USA': -74.0060
};

function changeSelection(loc) {
    var lac = coordsLat[loc];
    var lgc = coordsLng[loc];
    map.setCenter(new google.maps.LatLng(lac, lgc));
    console.log('selection changed')
    console.log('new coordinates are now: ' + lac +" : " + lgc);
}


$(document).ready(function(){
    $(window).on('load', function(){
    initMap();
    $("#selectedCity").change(changeSelection);

    });
});

Answer 1

之所以如此，是因為您將Event對象傳遞給changeSelection方法。 您需要傳遞一個值：

$("#selectedCity").change(function() {
  changeSelection($(this).val());
});

這工作，因為jQuery的設置this處理程序的回調到DOM元素中。 每個jQuery文檔：

每當您在jQuery集合上調用jQuery的.each（）方法或其事件方法之一時，回調函數的上下文（即this）都會被設置為DOM元素。

Answer 2

你在打電話

$("#selectedCity").change(changeSelection);

而您的功能changeSelection需要一個參數

function changeSelection(loc) { ... }

您可能想獲取選擇的值，因此我建議：

$("#selectedCity").change(function({changeSelection($("#selectedCity").options[$("#selectedCity").selectedIndex].value);});

值未從html格式傳遞到Javascript，變量記錄未定義，為什么？

問題描述

2 個解決方案

解決方案1
1 已采納 2017-11-08 20:49:10

解決方案2
0 2017-11-08 20:56:32

值未從html格式傳遞到Javascript，變量記錄未定義，為什么？

問題描述

2 個解決方案

解決方案1 1 已采納 2017-11-08 20:49:10

解決方案2 0 2017-11-08 20:56:32

解決方案1
1 已采納 2017-11-08 20:49:10

解決方案2
0 2017-11-08 20:56:32