无法将开放天气 api 当前天气和 5 天预报数据渲染到页面

Question

Im currently building a 5 day forecaster and iv written all the javascript out but i just can not manage to get the forecast data to display.我目前正在构建一个为期 5 天的预测器，并且 iv 将所有 javascript 都写了出来，但我就是无法让预测数据显示出来。 Im not really sure where to start as when i load in browser it does not throw an error for the javascript.我不确定从哪里开始，因为当我在浏览器中加载时，它不会为 javascript 引发错误。 Is the API im using the wrong one? API im 用错了吗？ Any Help with this would be greatly appreciated.对此的任何帮助将不胜感激。

 $(document).ready(function () { var apiKey = "c10049a3acdd6edc8eb4500188f2fafd" function addCity(newCity) { var newCityEl = $("<button>").addClass("list-group-item") newCityEl.text(newCity); $("#city-list").append(newCityEl); } function currentWeather(city) { var ajaxInfo = { URL: "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=" + apiKey, method: "GET" }; $.ajax(ajaxInfo).then(function(response) { var currentDate = new Date(); var dateString = "(" + (currentDate.getDate() + 1) + "/" + currentDate.getMonth() + "/" + currentDate.getFullYear() + ")"; var forecastHeader = response.name + " " + dateString; var iconURL = "http://openweathermap.org/img/wn/" + response.weather[0].icon + ".png"; var temperature = response.main.temp + "°C"; var humidity = response.main.humidity = "%"; var windSpeed = response.main.wind.speed = "km/h"; $("#forecast-city-header").text(forecastHeader); $("#current-icon").attr("src", iconURL); $("#temperature").text(temperature); $("#humidity").text(humidity); $("#wind-speed").text(windSpeed); }); } function fiveDayForecast(city) { var ajaxinfo = { URL:"https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=" + apiKey, method: "GET" }; $.ajax(ajaxInfo).then(function (response) { var currentDate = new Date(); for (var day = 1; day < 6; day++) { var dateString = "(" + (currentDate.getDate() + 1) + "/" + currentDate.getMonth() + "/" + currentDate.getFullYear() + ")"; $("#" + day + "-day-date").text(dateString); var index = 2 + ((day - 1) * 8); var dayForecast = response.list[index]; var iconURL = "http://openweathermap.org/img/wn/" + response.weather[0].icon + ".png"; $("#" + day + "-day-icon").attr("src", iconURL); var temp = dayForecast.main.temp + "°C"; $("#" + day + "-day-temp").text(temp); var humidity = dayForecast.main.humidity + "%"; $("#" + day + "-day-humidity").text(humidity); } }); } $("#search-submit").on("click", function (event) { event.preventDefault(); var userInput = $("#label").val(); addCity(userInput); }); $("#city-list").on("click", "button", function () { var cityButton = $(this); var city = cityButton.text(); currentWeather(city); fiveDayForecast(city); }); });

 .jumbotron { background: url(../images/jumbotron\ image.jpg); color: white; }.header{ text-align: center; } #label { padding: 5px 0; line-height: 1.5; } #search-submit { margin-top: -5px; margin: left -3px; } #cities-col { background-color: white; } #forecast-city-header { font-weight: bold; font-size: large; }.extended-forecast { border: 2px solid green; border-radius: 5px; padding: 5px; width: 19%; margin: 5px 6px 0 0; float: right; font-size: small; } #current-weather { border: 2px solid black; border-radius: 5px; padding: 5px; } #city-list { margin: 20px 0; }.weather-icon { height: 40px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>My Weather Dashboard</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="styles:css"> </script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min:js"></script> </head> <body> <header class="jumbotron jumbotron-fluid"> <div class="header container"> <h1 class="display-4">My Weather Dashborad</h1> </div> </header> <main class="container"> <div class="row"> <div id="cities-col" class="col-lg-4 col-md-12"> <form> <label for="label">Search for a city:</label> <br> <input id="label" type="text"> <input id="search-submit" class="btn btn-primary" type="submit"> </form> </div> </div> <ul id="city-list" class="list-group"></ul> </div> <div id="forecast-col" class="col-lg-8 col-md-12"> <div id="current-forecast"> <span id="forecast-city-header">City(Date)</span><img id="current-icon" class="weather-icon"></img> <br> Temperature: <span id="temperature"></span> <br> Humidity: <span id="humidity"></span> <br> Wind Speed: <span id="wind-speed"></span> <br> UV Index: <span id="UV-index"></span> </div> <p class="extended-forecast"> <span id="day-1-date">Date</span> <br> <img id="1-day-icon" class="weather-icon"> <br> Temp: <span id="day-1-temp"></span> <br> Humidity: <span id="day-1-humidity"></span> <br> Wind Speed: <span id="day-1-wind-speed"></span> <br> UV Index: <span id="day-1-UV-index"></span> </p> <p class="extended-forecast"> <span id="day-2-date">Date</span> <br> <img id="2-day-icon" class="weather-icon"> <br> Temp: <span id="day-2-temp"></span> <br> Humidity: <span id="day-2-humidity"></span> <br> Wind Speed: <span id="day-2-wind-speed"></span> <br> UV Index: <span id="day-2-UV-index"></span> </p> <p class="extended-forecast"> <span id="day-3-date">Date</span> <br> <img id="3-day-icon" class="weather-icon"> <br> Temp: <span id="day-3-temp"></span> <br> Humidity: <span id="day-3-humidity"></span> <br> Wind Speed: <span id="day-3-wind-speed"></span> <br> UV Index: <span id="day-3-UV-index"></span> </p> <p class="extended-forecast"> <span id="day-4-date">Date</span> <br> <img id="4-day-icon" class="weather-icon"> <br> Temp: <span id="day-4-temp"></span> <br> Humidity: <span id="day-4-humidity"></span> <br> Wind Speed: <span id="day-4-wind-speed"></span> <br> UV Index: <span id="day-4-UV-index"></span> </p> <p class="extended-forecast"> <span id="day-5-date">Date</span> <br> <img id="5-day-icon" class="weather-icon"> <br> Temp: <span id="day-5-temp"></span> <br> Humidity: <span id="day-5-humidity"></span> <br> Wind Speed: <span id="day-5-wind-speed"></span> <br> UV Index. <span id="day-5-UV-index"></span> </p> </div> </div> </main> <script src="./assets/script.js"></script> </body> </html>

Answer 1

There are two minor mistakes, after fixing them, your function fiveDayForecast will receive correct city name.有两个小错误，修复它们后，您的 function fiveDayForecast将收到正确的城市名称。

ajaxinfo -> ajaxInfo ajaxinfo -> ajaxInfo
var city = cityButton.text() -> var city = this.innerText var city = cityButton.text() -> var city = this.innerText

无法将开放天气 api 当前天气和 5 天预报数据渲染到页面

问题描述

1 个解决方案

解决方案1
0 2022-09-22 07:05:50

无法将开放天气 api 当前天气和 5 天预报数据渲染到页面

问题描述

1 个解决方案

解决方案1 0 2022-09-22 07:05:50

解决方案1
0 2022-09-22 07:05:50