Javascript 如何从本地天气应用程序的下拉菜单中获取国家信息？

我正在创建一个本地天气应用程序，我创建了一个下拉菜单，在其中单击一个位置，就会显示城市、国家和温度等信息。但是，我无法在每次单击某个位置时显示信息

这是我的密码

如你所见，我能够加载当前位置和温度。我所做的是列出全局变量并在函数getLocation中调用它们，然后在函数getWeather中运行info。对于下拉菜单，我制作了一个名为mainCities的数组，并将城市附加到function testMenu中的下拉菜单中。在这个函数中，我添加了onclick=testWeather'place'。对于这一个，我创建了另一个名为testWeathercityLocation的函数，在其中我再次列出了全局变量的信息，并尝试在函数getWeather中再次运行它，但它不起作用。我错过了什么

您可以在以下位置查看我的代码：

$document.readyfunction{ var-currentLat； 无功电流长； 当前城市； 无功电流区； 当前国家； var主要城市={ “旧金山”：{ '地区'：'加利福尼亚'， "国家":美国,， “lat”：37.7749300， ‘lon’：-122.4194200 }, “圣路易斯”：{ “地区”：“密苏里州”， "国家":美国,， “lat”：38.6272700， ‘lon’：-90.1978900 }, “迈阿密”：{ '地区'：'佛罗里达'， "国家":美国,， “lat”：25.7742700， ‘lon’：-80.1936600 }, “东京”：{ '地区'：'东京'， "国家":日本,， “纬度”：35.689500， “lon”：139.6917100 } }; 功能测试菜单{ 对于主要城市的var位置{ var city=place.replace//ug'； $'testMenu'。追加； } }; 函数testWeathercityLocation{ currentLat=testLocation[cityLocation].lat； currentLong=testLocation[cityLocation].lon； currentRegion=testLocation[cityLocation]。区域； currentCity=testLocation[cityLocation]； currentCountry=testLocation[cityLocation]。国家； getWeather； }; 函数getLocation{ $.getJSON'http://ip-api.com/json/?callback=?，函数数据{ currentRegion=data.regionName； currentCity=data.city； currentCountry=data.country； currentLat=data.lat； currentLong=data.lon； //$cityname.textcurrentCity； getWeather； }; }; 函数getWeather{ $cityname.textcurrentCity； $state.textcurrentRegion； $country.textcurrentCountry； $.getJSON'http://api.openweathermap.org/data/2.5/weather?lat=“+currentLat+”&lon=“+currentLong+”&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8”，函数JSON{ var showfahrenheit=真； var tempfarenheit=Math.roundjson.main.temp； var temcelcius=Math.roundtempfahrenheit-32*5/9； $temp.HTMLTEMP华氏度； $“单位开关”。单击“按钮”，功能{ 如果显示华氏温度===假{ $temp.HTMLTEMP华氏度； 显示华氏温度=真； }否则{ $temp.htmltemcelcius； 显示华氏温度=假； } $unit-toggle.toggleClasstoggle； //$'temp'.toggleClass'toggle'； }; }; }; $.cityrea.htmlgetLocation； 测试菜单； }; @导入url'https://fonts.googleapis.com/css?family=Roboto:300,400'; 身体{ 位置：相对位置； } html，正文{ 身高：100%； } .包装纸{ 宽度：100%； 身高：100%； 位置：相对位置； } .集装箱{ 位置：相对位置； 显示：块； 保证金：0自动； 宽度：60%； } .标题h1{ 文本对齐：居中； 字体系列：“Roboto”，无衬线； 字体大小：正常； 裕度：0 10px 0； } .风箱{ 文本对齐：居中； } 城市酒店{ 颜色：000000； 字体系列：“Roboto”，无衬线； 字体大小：正常； 字号：2em； 保证金：0； } .农村地区{ 位置：相对位置； 显示：-webkit flex； 显示器：flex； -webkit内容：中心； 证明内容：中心； 保证金：0自动； } .乡郊h3{ 裕度：0 10px 0； 字体系列：“Roboto”，无衬线； 字体大小：正常； } .农村地区h3：第一个孩子{ 右边距：8px； } .下拉列表{ 位置：相对位置； 显示：内联块； 字体大小：16px； 颜色：FFF； } .下拉标题{ 显示：块； 填充：3px20px； 字体大小：12px； 线高：1.42857143； 颜色：777； 空白：nowrap； 文本转换：大写； } 输入[类型=复选框]{ 显示：无； } 标签{ 框大小：边框框； 显示：内联块； 宽度：100%； 背景色：57A0D4； 填充：10px 20px； 光标：指针； 文本对齐：居中； 盒影：0 1px 1px rgba0,0,0,0.2； 边界半径：5px； 字体大小：20px； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； } 标签：fa globe{ 右边距：10px； } /*ul将显示：默认情况下无*/ U l{ 位置：绝对位置； 列表样式：无； 文本对齐：左对齐； 宽度：100%； 最小宽度：160px； z指数：1； 填充：5px0； 边际：2px0； 字体大小：14px； 文本对齐：左对齐； 盒影：0px 1px 1px rgba0,0,0,0.2； 显示：无； 背景色：fff； 边框：1px实心ccc； 边框：1px实心rgba0,0,0,15； 边界半径：4px； -webkit盒阴影：0 6px 12px rgba0,0,0.175； 盒影：0 6px 12px rgba0,0,0,175； } ulli{ /*填充：15px*/ 背景色：fff； 颜色：4FB9A7； 边缘底部：1px； 光标：指针； } ullia{ 填充：8px 20px； 颜色：继承； 文字装饰：无； 显示：块； } 悬停{ 背景色：4FB9A7； 颜色：FFF； } 输入[类型=复选框]：选中~标签{ 背景色：3D88BD； } 输入[类型=复选框]：选中~ul{ 显示：块； } 分流器{ 高度：1px； 利润率：9px0； 溢出：隐藏； 背景色：E5； } .温度范围温度{ 位置：相对位置； 颜色：000000； 字号：80px； } .温度A温度：之后{ 内容：； 位置：绝对位置； 高度：10px； 宽度：10px； 顶部：16px； 右：-17px； 边框：3px000000； 边界半径：50%； } .天气>跨度{ 位置：相对位置； 字号：1.2rem； } .天气>跨度：之前{ 内容：； 位置：绝对位置； 左：-10px； 顶部：0px； 高度：3倍； 宽度：3倍； 边框：2×000； 边界半径：50%； } .主开关跨度{ 利润率：0.16px； } .主切换范围：最后一个子项{ 左边距：11px； } .天气按钮{ 背景：6bbf6b； 边界：无； 边界半径：30px； 大纲：无； 宽度：45px； 高度：20px； 保证金：5px5px0； 光标：指针； 位置：相对位置； 过渡：背景2； } .天气按钮：激活{ 背景：67b567； } .天气单位开关{ 位置：绝对位置； 显示：内联块； 左：-8px； 顶部：2个； 宽度：15px； 高度：15px； 背景：fff； 边界半径：50%； 过渡：左。2s； } 单位切换{ 左：16px； } 当地天气 主要城市 F C

---

由于您已在document.ready内部定义了所有函数和变量，因此代码中存在两个问题。您无法访问document.ready外部的任何函数和变量。这就是为什么当您在onclick li上调用“testWeather”时，它抛出一个没有定义的“testWeather”。要解决这个问题，您应该将变量和函数设置为全局变量，您应该在document.ready之外定义所有变量。只需在document.ready中保留两行以下的代码即可。 $.cityrea.htmlgetLocation； 测试菜单

但这只会解决“testWeather”未定义的问题，而且代码中还有更多的问题，在testWeatherfunction中，您使用的是一个名为testLocation的属性，该属性未定义，因此您将在这里得到一个JavaScript错误。您已将测试位置保存在mainCities变量中，因此应使用mainCities而不是testLocation。这两项更改将使您的应用程序运行时不会出现任何错误。下面是更正的JavaScript代码。您的代码还有一个小错误，您阅读当前城市的方式不正确

$(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');
            });

        });
    };

---

谢谢在您发布此解决方案时，我已经解决了一些问题，并将testLocation替换为MainCities。我根据您的解决方案修复了其余的问题，并且效果良好。然而，有一个问题。每当我点击一个位置时，它只显示[对象]，而不是城市名称。我不知道怎么回事。城市名称的问题是，您将当前城市指定为主要城市[cityLocation]；这是一个对象而不是字符串。要获取正确的名称，请使用cityLocation.replace//ug'。希望这有帮助。