文章/答案/技术大牛

发布

社区首页 >问答首页 >无法显示打开的天气api当前天气和5天预测数据到页面

问无法显示打开的天气api当前天气和5天预测数据到页面
EN

Stack Overflow用户

提问于 2022-09-22 06:24:37

回答 1查看 48关注 0票数 0

我目前正在构建一个为期5天的预报员和iv编写了所有的javascript，但我只是无法设法使预测数据显示。我真的不知道从哪里开始，因为当我在浏览器中加载时，它不会为javascript抛出一个错误。API im使用错误吗？如果能对此提供任何帮助，我们将不胜感激。

$(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>

javascript

html

css

openweathermap

回答 1

Stack Overflow用户

发布于 2022-09-22 07:05:50

有两个小错误，修复后，您的函数fiveDayForecast将得到正确的城市名称。

ajaxinfo -> ajaxInfo

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73810186

复制

相似问题

问无法显示打开的天气api当前天气和5天预测数据到页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法显示打开的天气api当前天气和5天预测数据到页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法显示打开的天气api当前天气和5天预测数据到页面
EN