Values not passing from html form to Javascript, variables logging undefined, why?

Question

I'm trying to make a small site for class that will changes maps based on drop down selection. The first map pops up fine because I have the lat and long values hard coded, but when you use the drop down box, the values come back undefined. I dont think it's being passed correctly and I can't figure out why.

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

and the JS file is below

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

It's so because you pass an Event object to the changeSelection method. You need to pass a value instead:

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

This would work because jQuery sets this within the handler's callback to a DOM element. Per jQuery doc :

Whenever you call jQuery's .each() method or one of its event methods on a jQuery collection, the context of the callback function — this — is set to a DOM element.

Answer 2

you are calling

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

while your function changeSelection needs a parameter

function changeSelection(loc) { ... }

you probably want to get the value of the select, therefore I would recommend:

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

Values not passing from html form to Javascript, variables logging undefined, why?

Question

2 answers

solution1
1 ACCPTED 2017-11-08 20:49:10

solution2
0 2017-11-08 20:56:32

Values not passing from html form to Javascript, variables logging undefined, why?

Question

2 answers

solution1 1 ACCPTED 2017-11-08 20:49:10

solution2 0 2017-11-08 20:56:32

solution1
1 ACCPTED 2017-11-08 20:49:10

solution2
0 2017-11-08 20:56:32