Question

最初我有3个独立的.js文件，每个城市一个用于测试api，并且它工作得很好。现在我试图在单个.js文件中插入所有3个请求，同时发出所有请求并从html调用单个js，但我无法做到。

    var APPID = "b4d7400359e1dd91c7dee5cf238c9681";``
var temp1;
var loc1;
var icon1;
var temp2;
var loc2;
var icon2;
var temp3;
var loc3;
var icon3;

function updateById1(){
    var url = "http://api.openweathermap.org/data/2.5/weather?id=2525689&APPID=" + APPID;
    sendRequest(url);
}

function updateById2(){
    var url = "http://api.openweathermap.org/data/2.5/weather?id=2525473&APPID=" + APPID;
    sendRequest(url);
}

function updateById3(){
    var url = "http://api.openweathermap.org/data/2.5/weather?id=3173435&APPID=" + APPID;
    sendRequest(url);
}
function sendRequest (url){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange =  function() {
                console.log(xmlhttp.status);
            if (xmlhttp.readyState ===
                        XMLHttpRequest.DONE && xmlhttp.status === 200){
            var data = JSON.parse(xmlhttp.responseText);
            var weather = {};
            weather.icon = data.weather[0].id;
            weather.loc = data.name;
            weather.temp = K2C(data.main.temp);
            update(weather);
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();


}

function K2C (k) {
    return Math.round(k-273.15);
}

function update(weather){
    loc.innerHTML = weather.loc;
    temp.innerHTML = weather.temp;
    icon.src = "imgs/codes/" + weather.icon + ".png";
    //console.log(icon.src);
}

window.onload = function () {
    temp1 = document.getElementById.innerHTML= "temperature1";
    loc1 = document.getElementById("location1");
    icon1 = document.getElementById("icon1");
    temp2 = document.getElementById("temperature2");
    loc2= document.getElementById("location2");
    icon2 = document.getElementById("icon2");
        temp3 = document.getElementById("temperature3");
    loc3 = document.getElementById("location3");
    icon3 = document.getElementById("icon3");

        updateById1();
    updateById2();
    updateById3();
}

这里是html

    <html>
  <head>
    <meta charset="utf-8"/>
    <title>Weather App</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />


     <script type="text/javascript" src="app.js"></script> 


  </head>


  <body>

        <div class="weather-app">


            <div class="arborea">



            <div class="temperature"><span id="temperature1">0</span>&deg;</div> 
            <div class="location"><span id="location1">Unknown</span></div>
            <div class="top">
            <img id="icon1" width="75px" src="imgs/codes/200.png"/>
            </div>
            </div>  



        <div class="cagliari">



    <div class="temperature"><span id="temperature2">0</span>&deg;</div> 
    <div class="location"><span id="location2">Unknown</span></div>
        <div class="top">
        <img id="icon2" width="75px" src="imgs/codes/200.png" />
    </div>
        </div>



    <div class="milano">  



    <div class="temperature"><span id="temperature3">0</span>&deg;</div> 
    <div class="location"><span id="location3">Unknown</span></div>
    <div class="top">
        <img id="icon3" width="75px" src="imgs/codes/200.png" />
    </div>
        </div>
        </div>


  </body>
</html>

Answer 1

您的update函数有loc和temp undefined。我已经更新并测试了代码。如果您在理解任何特定内容时需要帮助，请告诉我。

始终查看console（右键单击 - ＆gt;检查元素 - ＆gt;控制台）是否存在错误。

   var APPID = "b4d7400359e1dd91c7dee5cf238c9681";
   var temp1;
   var loc1;
   var icon1;
   var temp2;
   var loc2;
   var icon2;
   var temp3;
   var loc3;
   var icon3;

   function updateById1() {
       var url = "http://api.openweathermap.org/data/2.5/weather?id=2525689&APPID=" + APPID;
       sendRequest(url, 1);
   }

   function updateById2() {
       var url = "http://api.openweathermap.org/data/2.5/weather?id=2525473&APPID=" + APPID;
       sendRequest(url, 2);
   }

   function updateById3() {
       var url = "http://api.openweathermap.org/data/2.5/weather?id=3173435&APPID=" + APPID;
       sendRequest(url, 3);
   }

   function sendRequest(url, id) {
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.onreadystatechange = function() {
           console.log(xmlhttp.status);
           if (xmlhttp.readyState ===
               XMLHttpRequest.DONE && xmlhttp.status === 200) {
               var data = JSON.parse(xmlhttp.responseText);
               var weather = {};
               weather.icon = data.weather[0].id;
               weather.loc = data.name;
               weather.temp = K2C(data.main.temp);
               update(weather, id);
           }
       };
       xmlhttp.open("GET", url, true);
       xmlhttp.send();


   }

   function K2C(k) {
       return Math.round(k - 273.15);
   }

   function update(weather, id) {
       switch (id) {
           case 1:
               loc1.innerHTML = weather.loc;
               temp1.innerHTML = weather.temp;
               icon1.src = "imgs/codes/" + weather.icon + ".png";
               break;
           case 2:
               loc2.innerHTML = weather.loc;
               temp2.innerHTML = weather.temp;
               icon2.src = "imgs/codes/" + weather.icon + ".png";
               break;
           case 3:
               loc3.innerHTML = weather.loc;
               temp3.innerHTML = weather.temp;
               icon3.src = "imgs/codes/" + weather.icon + ".png";
               break;
           default:
               console.log("incorrect id")
       }
   }

   window.onload = function() {
       temp1 = document.getElementById("temperature1");
       loc1 = document.getElementById("location1");
       icon1 = document.getElementById("icon1");
       temp2 = document.getElementById("temperature2");
       loc2 = document.getElementById("location2");
       icon2 = document.getElementById("icon2");
       temp3 = document.getElementById("temperature3");
       loc3 = document.getElementById("location3");
       icon3 = document.getElementById("icon3");

       updateById1();
       updateById2();
       updateById3();
   }

使用openweathermaps API

1 个答案: