如何从“本地天气”应用程序的下拉菜单中显示一个国家的信息？

Question

I'm creating a Local Weather app and I created an dropdown menu in which you click on a location and the information such as City, Country, and temperature appears. However, I was unable to make the information appear every time I click on a location.

Here's my code.

As you can see, I was able to load the current location and temperature. What I did was to list global variables and call them in function getLocation() and run the info in function getWeather() . For the dropdown Menu, I made an array called mainCities and append the cities to dropdown menu in function testMenu() . In this function, I added onclick=testWeather('place') . For this one, I created another function called function testWeather(cityLocation) in which I again listed info for global variables and tried to run it again in function getWeather() but it's not working. What did I miss?

You can see my code in action at: http://codepen.io/kikibres/pen/EZMJZw

 $(document).ready(function() { var currentLat; var currentLong; var currentCity; var currentRegion; var currentCountry; var mainCities = { 'San_Francisco': { 'region': 'California', 'country': "United States", 'lat': 37.7749300, 'lon': -122.4194200 }, 'St._Louis': { 'region': 'Missouri', 'country': "United States", 'lat': 38.6272700, 'lon': -90.1978900 }, 'Miami': { 'region': 'Florida', 'country': "United States", 'lat': 25.7742700, 'lon': -80.1936600 }, 'Tokyo': { 'region': 'Tokyo', 'country': "Japan", 'lat': 35.689500, 'lon': 139.6917100 } }; function testMenu() { for (var place in mainCities) { var city = place.replace(/_/g, ' '); $('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>"); } }; function testWeather(cityLocation) { currentLat = testLocation[cityLocation].lat; currentLong = testLocation[cityLocation].lon; currentRegion = testLocation[cityLocation].region; currentCity = testLocation[cityLocation]; currentCountry = testLocation[cityLocation].country; getWeather(); }; function getLocation() { $.getJSON('http://ip-api.com/json/?callback=?', function(data) { currentRegion = data.regionName; currentCity = data.city; currentCountry = data.country; currentLat = data.lat; currentLong = data.lon; //$("#cityname").text(currentCity); getWeather(); }); }; function getWeather() { $("#cityname").text(currentCity); $("#state").text(currentRegion); $("#country").text(currentCountry); $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) { var showfahrenheit = true; var tempfahrenheit = Math.round(json.main.temp); var temcelcius = Math.round((tempfahrenheit - 32) * 5/9); $("#temp").html(tempfahrenheit); $('#unit-switch').on('click', function() { if (showfahrenheit === false) { $("#temp").html(tempfahrenheit); showfahrenheit = true; } else { $("#temp").html(temcelcius); showfahrenheit = false; } $("#unit-toggle").toggleClass("toggle"); //$('#temp').toggleClass('toggle'); }); }); }; $(".cityarea").html(getLocation); testMenu(); }); 

 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); body { position: relative; } html,body{ height:100%; } .wrapper { width: 100%; height: 100%; position: relative; } .container { position: relative; display: block; margin: 0 auto; width: 60%; } .header h1 { text-align: center; font-family: 'Roboto', sans-serif; font-weight: normal; margin: 0 0 10px 0; } .weatherbox { text-align: center; } .cityarea h2 { color: #000000; font-family: 'Roboto', sans-serif; font-weight: normal; font-size: 2em; margin: 0; } .countryarea { position: relative; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin: 0 auto; } .countryarea h3 { margin: 0 0 10px 0; font-family: 'Roboto', sans-serif; font-weight: normal; } .countryarea h3:first-child { margin-right: 8px; } .dropdown { position: relative; display: inline-block; font-size: 16px; color: #FFF; } .dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #777; white-space: nowrap; text-transform: uppercase; } input[type=checkbox]{ display: none; } label{ box-sizing: border-box; display: inline-block; width: 100%; background-color: #57A0D4; padding: 10px 20px; cursor: pointer; text-align: center; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label .fa-globe { margin-right: 10px; } /* The ul will have display:none by default */ ul{ position: absolute; list-style: none; text-align: left; width: 100%; min-width: 160px; z-index: 1; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); display: none; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } ul li{ /*padding: 15px;*/ background-color: #fff; color: #4FB9A7; margin-bottom: 1px; cursor: pointer; } ul li a { padding: 8px 20px; color: inherit; text-decoration: none; display: block; } ul li a:hover{ background-color: #4FB9A7; color: #FFF; } input[type=checkbox]:checked ~ label { background-color: #3D88BD; } input[type=checkbox]:checked ~ ul { display: block; } ul .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .temperaturearea span#temp { position: relative; color: #000000; font-size: 80px; } .temperaturearea #temp:after { content: ''; position: absolute; height: 10px; width: 10px; top: 16px; right: -17px; border: 3px solid #000000; border-radius: 50%; } .weather > span { position: relative; font-size: 1.2rem; } .weather > span:before { content: ''; position: absolute; left: -10px; top: 0px; height: 3px; width: 3px; border: 2px solid #000; border-radius: 50%; } .main-toggle span { margin: 0 0 0 16px; } .main-toggle span:last-child { margin-left: 11px; } .weather button { background: #6bbf6b; border: none; border-radius: 30px; outline: none; width: 45px; height: 20px; margin: 5px 5px 0; cursor: pointer; position: relative; transition: background .2s; } .weather button:active { background: #67b567; } .weather #unit-toggle { position: absolute; display: inline-block; left: -8px; top: 2px; width: 15px; height: 15px; background: #fff; border-radius: 50%; transition: left .2s; } #unit-toggle.toggle { left: 16px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="container"> <div class="header"><h1>Local Weather</h1></div> <div class="weatherbox"> <div class="cityarea"> <h2 id="cityname"></h2> </div> <div class="countryarea"> <h3 id="state"></h3> <h3 id="country"></h3> </div> <div class="dropdownlocation"> <div class="dropdown"> <input type="checkbox" id="checkbox-toggle"> <label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label> <ul id="testMenu"> <li><a href="#">Current Location</a></li> <li class="divider"></li> <li class="dropdown-header">Main Cities</li> </ul> </div> </div> <div class="temperaturearea"> <div> <span id="wicon"></span> </div> <div id="wdescription"></div> <span id="temp"></span> <div class="weather main-toggle"> <!-- Begin Unit Switch --> <span>F</span> <button id="unit-switch"><span id="unit-toggle"></span></button> <span>C</span> </div> </div> </div> </div> </div> 

Answer 1

There are couple of issues with the code, since you have defined all your functions and variable inside document.ready you can't access any of those functions and variable outside document.ready . That's why when you call ' testWeather ' on onclick li, it throws an ' testWeather ' is not defined. To solve this(you should make your variables and function global) you should define all you variable outside the document.ready . Just keep only below two lines of code inside document.ready. $(".cityarea").html(getLocation); testMenu();

But this will just solve ' testWeather ' is not defined issue, and there is onre more issue in your code, inside testWeather function there, you are using one property called testLocation , which is not defined, so you will get a JavaScript error here. You have saved your test locations in mainCities variable so you should use mainCities instead of testLocation . These two changes will make your app works without any error. Here is corrected JavaScript code. There is one more minor error your code, the way you are reading current city is not right.

$(document).ready(function () { 
     $(".cityarea").html(getLocation);   
     testMenu();
 });
    var currentLat;
    var currentLong;
    var currentCity;
    var currentRegion;
    var currentCountry;

    var mainCities = {
        'San_Francisco': {
            'region': 'California',
            'country': "United States",
            'lat': 37.7749300,
            'lon': -122.4194200
        },
        'St._Louis': {
            'region': 'Missouri',
            'country': "United States",
            'lat': 38.6272700,
            'lon': -90.1978900
        },
        'Miami': {
            'region': 'Florida',
            'country': "United States",
            'lat': 25.7742700,
            'lon': -80.1936600
        },
        'Tokyo': {
            'region': 'Tokyo',
            'country': "Japan",
            'lat': 35.689500,
            'lon': 139.6917100
        }
    };

    function testMenu() {
        for (var place in mainCities) {
            var city = place.replace(/_/g, ' ');
            $('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>");
        }
    };

    function testWeather(cityLocation) {
        currentLat = mainCities[cityLocation].lat;
        currentLong = mainCities[cityLocation].lon;
        currentRegion = mainCities[cityLocation].region;
        currentCity = mainCities[cityLocation];
        currentCountry = mainCities[cityLocation].country;

        getWeather();

    };

    function getLocation() {
        $.getJSON('http://ip-api.com/json/?callback=?', function (data) {

            currentRegion = data.regionName;
            currentCity = data.city;
            currentCountry = data.country;
            currentLat = data.lat;
            currentLong = data.lon;

            //$("#cityname").text(currentCity);

            getWeather();

        });
    };

    function getWeather() {

        $("#cityname").text(currentCity);
        $("#state").text(currentRegion);
        $("#country").text(currentCountry);

        $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function (json) {

            var showfahrenheit = true;
            var tempfahrenheit = Math.round(json.main.temp);
            var temcelcius = Math.round((tempfahrenheit - 32) * 5 / 9);

            $("#temp").html(tempfahrenheit);

            $('#unit-switch').on('click', function () {
                if (showfahrenheit === false) {
                    $("#temp").html(tempfahrenheit);
                    showfahrenheit = true;
                } else {
                    $("#temp").html(temcelcius);
                    showfahrenheit = false;
                }

                $("#unit-toggle").toggleClass("toggle");
                //$('#temp').toggleClass('toggle');
            });

        });
    };