调用另一个API后，JavaScript API返回到未定义状态 //app.js const SEARCH_VIEW=document.getElementById（'SEARCH_VIEW'）； const RESULTS_VIEW=document.getElementById（'RESULTS_VIEW'）； const FORECAST\u VIEW=document.getElementById（'FORECAST\u VIEW'） 函数loadCities（）{ 康斯特城市=[“伦敦”、“巴黎”、“马德里”、“里斯本”、“奥里德”]； var选项=null； var dest=document.getElementById（'dest'）； //环城 cities.forEach（city=>{ 选项+=''+城市+''； }); dest.innerHTML=选项； } 函数gettingWeather（）{ //1.打开Url var dest=document.getElementById（'dest'）.value； var url=（'http://api.openweathermap.org/data/2.5/weather?q=“+dest+”&appid=exampleAppId'）； console.log（url）； 控制台日志（dest）； //2.获取URL 获取（url） 。然后（响应=>{ 如果（response.status！==200）{ 控制台错误（“API失败，状态代码”+响应状态）； 返回； } 控制台日志（响应）； //3.我们生成response.json并打开数据 response.json（）.then（数据=>{ 控制台日志（数据）； 结果_VIEW.style.visibility='visible'； //温度 document.getElementById（'Temperature'）.textContent=data.main.temp； //风 document.querySelector（“.Wind”）.textContent=data.Wind.speed*data.Wind.deg； //描述 document.querySelector（'.Description'）。textContent=data.weather[0]。Description； }); }).catch（错误=>{ 控制台错误（“获取错误”+错误）； }); } 功能预测（）{ 常量API_BASE=http://api.openweathermap.org/data/2.5/forecast?mode=json&'; 常量API_KEY='appid=exampleAppId&'； var dest=document.getElementById（'dest'）.value； var url=API_BASE+API_KEY+'q='+dest.value； console.log（url）； 控制台日志（目标值）； //2.获取URL 获取（url） 。然后（响应=>{ 如果（response.status！==200）{ 控制台错误（“API失败，状态代码”+响应状态）； 返回； } 控制台日志（响应）； //3.我们生成response.json并打开数据 response.json（）.then（数据=>{ 控制台日志（数据）； 结果_VIEW.style.visibility='hidden'； FORECAST_VIEW.style.visibility='visible'； }); }).catch（错误=>{ 控制台错误（“获取错误”+错误）； }); } index.html 天气应用程序 天气应用程序

选择一个城市

温度
风
描述 预测 预测 我的任务是随机选择5个欧洲城市，并显示一些属性，但单击按钮时，我需要显示该城市的预测。我尝试使用词法范围来定义我的应用程序的一半工作。在简单部分，我显示了一些取自API的属性，当我单击按钮forecast时，我对响应错误有错误，但错误也是我选择的城市。如果我使用任何城市，预测中的城市是未定义的。我不知道我为什么会有这个错误，我也没有任何内部人员尝试过结束如果您不知道任何答案，我将非常感谢您对类似工作的了解或参考

---

谢谢

问题在于变量“dest”已经包含该值。因此，您在“dest”中有您所在城市的名称，并使用dest.value，这是未定义的，因为dest是一个字符串，没有名为value的属性。 要修复代码，只需删除url中的.value：

//app.js
const SEARCH_VIEW  = document.getElementById('search_view');
const RESULTS_VIEW = document.getElementById('results_view');
const FORECAST_VIEW = document.getElementById('forecast_view')


function loadCities(){


    const cities = ["London", "Paris", "Madrid", "Lisbon","Ohrid"];

    var options = null;

    var dest = document.getElementById('dest');

    //Looping the cities
    cities.forEach(city => {
        options += '<option>' + city +'</options>';
    });

    dest.innerHTML = options;
}

function gettingWeather(){

    // 1. Open the Url
    var dest = document.getElementById('dest').value;
    var url = ('http://api.openweathermap.org/data/2.5/weather?q='+ dest + '&appid=exampleAppId');
    console.log(url);
    console.log(dest);

    // 2. Fetch the URL

    fetch(url)
        .then(response => {
        if(response.status !== 200){
            console.error("API failed, Status Code " + response.status);
            return;
        }
        console.log(response);
    // 3.We make the response .json and open the data

        response.json().then(data => {
        console.log(data);
        RESULTS_VIEW.style.visibility = 'visible';
        // Temperature
        document.getElementById('Temperature').textContent = data.main.temp;    

        //Wind

        document.querySelector('.Wind').textContent = data.wind.speed * data.wind.deg;
        //Description
        document.querySelector('.Description').textContent = data.weather[0].description;   
        });

        }).catch(err => {
        console.error("Fetch error "+ err);
    });
}

function forecast(){
    const API_BASE = 'http://api.openweathermap.org/data/2.5/forecast?mode=json&';
    const API_KEY = 'appid=exampleAppId&';
    var dest = document.getElementById('dest').value;
    var url = API_BASE + API_KEY + 'q=' + dest.value;
    console.log(url);
    console.log(dest.value);

    // 2. Fetch the URL

    fetch(url)
        .then(response => {
        if(response.status !== 200){
            console.error("API failed, Status Code " + response.status);
            return;
        }
            console.log(response);
    // 3.We make the response .json and open the data

        response.json().then(data => {
            console.log(data);

            RESULTS_VIEW.style.visibility = 'hidden';
            FORECAST_VIEW.style.visibility= 'visible';



    });

    }).catch(err => {
             console.error("Fetch error "+ err);
    });
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<link href="styles.css" type="text/css" rel="stylesheet">

</head>
<body onload="loadCities();">







<div class="container">

    <div id = "results_view">
         <div class="inputWrapper">
            <h1> Weather App </h1>
            <p>Choose a city.</p>
            <select  id="dest" onchange="gettingWeather();"  width=150 style="width:150px" ></select><br>
            <label>Temperature</label>
            <label class="Temperature" id="Temperature"></label><br>
            <label>Wind</label>
            <label class="Wind" id="Wind"></label><br>
            <label>Description</label>
            <h1 class="Description" id="Description"></h1>

            <button onclick="forecast();">Forecast</button>
        </div><!-- InputWrapper -->
    </div>
    <div id="forecast_view">
        <h1>ForeCast</h1>
    </div>

 </div> <!-- end container -->




 <script src="app.js"></script> 
</body>
</html>

---

@Maroen Mhiri非常感谢，我非常感谢这可以帮助你：-）@Maroen Mhiri我想知道你知道如何实现天气api中的图标吗？我的意思是，你有没有处理过这个问题？我刚刚开始学习JS，我的程序员朋友告诉我的最好的方法是从“弄脏我的脑袋”和第一个主题开始APIs@EmirMustafoski不，我没有使用那个API，但我花时间阅读文档：-）。对于天气图标：您的json响应给出了您的i.e.图标：“10d”这是图标的ID，然后您可以使用以下url获取图像：。有关更多信息，请检查以下内容：

const API_BASE = 'http://api.openweathermap.org/data/2.5/forecast?mode=json&';
const API_KEY = 'appid=6c345b20d0c8fac21a36761eb7d6cd38&';
var dest = document.getElementById('dest').value;
var url = API_BASE + API_KEY + 'q=' + dest; // only dest NOT dest.value
console.log(dest); // the city selected