我正在为我的网络开发课程使用 Rapid API 开发一个迷你天气应用程序，但由于某种原因我的网页没有加载我的所有更改

问题描述 投票：0回答：1

这是JAVASCRIPT代码：


//this function will get IP number from ipify API
function getIP() {
    const data = fetch("https://api.ipify.org/?format=json")
        
    .then( function(responseData){

        if (responseData.ok) return responseData.json();
        else return Promise.reject(responseData);

        }) 
    
    .then( function(responseJSON) {
        // everything worked, output info
        console.log("IP number: " + responseJSON.ip);

        // call weather API
        getWeather(responseJSON.ip);

        })

    .catch( function(error){
        console.log("IP error:" + error);
    });

}


//get weather from RapidAPI weather api based on passed IP number
function getWeather(e){

    const url = 'https://weatherapi-com.p.rapidapi.com/current.json?q=' + e;
    const options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Key': '9990b72cc3msh8189499bc9e6162p1008e6jsnafd5556ed080',
            'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
        }
    };

    console.log("weatherapi accessed");

    let data = fetch(url, options)
        .then( function(response) {
            if (response.ok) return response.json();
            else return Promise.reject(response);
        })

        .then(function(responseJSON) {
            console.log("Weather object: ");
            console.log(responseJSON);
            console.log("Temp in F: " + responseJSON.current.temp_f);
            document.querySelector("#tempF span").innerHTML = responseJSON.current.temp_f;
            document.querySelector("#tempC span").innerHTML = responseJSON.current.temp_c;
            document.querySelector("#weatherIcon").src = responseJSON.current.condition.icon;
            document.querySelector("#weatherText").innerHTML = responseJSON.current.condition.text;
            document.querySelector("#windMPH span").innerHTML = responseJSON.current.wind_mph;
            document.querySelector("#windKPH span").innerHTML = responseJSON.current.wind_kph;
            document.querySelector("#windDirection").innerHTML = responseJSON.current.wind_degree;
            document.querySelector("#humidity span").innerHTML = responseJSON.current.humidity;
            document.querySelector("#cloudCover span").innerHTML = responseJSON.current.cloud;
            document.querySelector("#city").innerHTML = responseJSON.location.name;
            document.querySelector("#state").innerHTML = responseJSON.location.region;        
        })

        .catch(function(error) {
            console.log("Weather API error: " + error);

        });
}  


// function to sumbit modals
function toggleModal() {
    document.querySelector("#modalCover").classList.toggle("hidden");
    document.querySelector("#modalPopup").classList.toggle("hidden");
}





// wait until DOM loads
document.addEventListener("DOMContentLoaded", function() {

    // show modal
    let formToSubmit = document.querySelector("#formBox");
        formToSubmit.addEventListener("submit", function(e) {

        e.preventDefault(); // don't let form submit

        // examine form code values
        let city = document.querySelector("#city").value;
        getWeather(city);

        let state = document.querySelector("#state").value;
        getWeather(state);
        toggleModal(); // show/hide modal

    });  

    
    
});

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    
    <!-- meta tags and title -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Weather Demo</title>

    <!-- external and internal CSS -->
    <link rel="stylesheet" href="styles.css" media="all">
    <style>
        /* in-file CSS here */
    </style>

    <!-- external and internal JavaScript -->
    <script src="scripts.js" defer></script>
    <script>
        // in-page JavaScript here
    </script>

</head>
<body>

    <div id="modalCover" class="hidden"></div>

    <div id="modalPopup" class="hidden">
        <form id="formBox">
            <p>Input Your City And State</p><br>
            <p><label for="city">City:</label> <input type="text" name="city" id="city" required></p>
            <p><label for="state">State:</label><input type="text" name="state" id="state" required></p>                                                                    </p>
            <button type="submit" id="submit">Submit</button>
            <button type="reset" id="cancel">Cancel</button>

        </form>
    </div>

    

    <header><a href="/tp8/index.html">Simple Weather App</a></header>

    <div class="contentBox">
       <div id="temp">
            <h2>Temp</h2>
                <p id="tempF">0<span></span>°F</p>
                <p id="tempC">0<span></span>°C</p> 
       </div>  
       
       <div id="weather">
            <h2>Weather Condition</h2>
                <p id="condition"><span>Light Rain</span></p>
                <img id="weatherIcon" src = "">
       </div>

       <div id="wind">
            <h2>Wind</h2>
                <p id="windMPH">Wind Speed:<span> 0 </span> MPH </p>
                <p id="windKPH"><span>0</span> KPH</p>
                <p id="windDirection"><span class="direction">Direction:</span><span class="degree"> 0 </span>°</p>
       </div>

       <div id="humidity">
            <h2>Humidity</h2>
                <p id="humidity">Humidity:<span> 0 </span>%</p>
       </div>

       <div id="cloudCover">
            <h2>Cloud Cover</h2>
                <p id="cloudCover"><span> 0 </span>%</p>
       </div>
    </div>

    



</body>
</html>

这是我的CSS供参考：

/*---Styling---*/

@import url('https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(186, 158, 158);
}

header {
    margin: 0;
    padding: 0;
    background-color: rgb(255, 184, 122);
    border-radius: 28px;
    justify-content: center;
    align-items: center;
}

a {
    font-family: "Rokkitt", sans-serif;
    font-size: 40px;
    display: flex;
    color:rgb(0, 0, 0);
    text-decoration: none;
    align-items: center;
}

.contentBox {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    justify-content: center;
    text-align: center;
  
    border-radius: 30px;
    background-color: bisque;
}

/*contentbox text*/
h2 {
font-size: 50px;
font-family: "Rokkitt", sans-serif;

color: rgb(142, 49, 18);
}

p {
font-size: 25px;
font-family: "Rokkitt", sans-serif;
}

#modalCover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
}

#modalPopup {
    position: absolute;
    width: 30vw;
    height: 60vh;
    left: 35vw;
    top: 20vh;
    padding: 1em;
    background-color: rgb(210, 151, 49);
    border: 6px solid rgb(81, 52, 6);
    border-radius: 30px;
    color: black;
    font-size: 200%;

}

.hidden {
    display: none;
}

p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}

我对 javascript 还很陌生，所以如果我遗漏了一些错误，有更好经验的人可以在我的代码中看到，请告诉我，以便我可以修复它！谢谢！

我尝试根据我的讲师重写我的代码，但我的页面拒绝加载我的弹出表单，该表单允许用户输入他们的城市和州并获取天气数据。

javascript json
1个回答
0
投票

初始状态是模态框隐藏。您需要执行一些操作才能使模式可见。在这里，我创建了一个带有文本“Show modal”的按钮，并在按钮上创建了一个调用toggleModal 函数的事件侦听器。

还有很多事情我会做不同的事情，但这就是所给问题的答案。

//this function will get IP number from ipify API
function getIP() {
  const data = fetch("https://api.ipify.org/?format=json")

    .then(function(responseData) {

      if (responseData.ok) return responseData.json();
      else return Promise.reject(responseData);

    })

    .then(function(responseJSON) {
      // everything worked, output info
      console.log("IP number: " + responseJSON.ip);

      // call weather API
      getWeather(responseJSON.ip);

    })

    .catch(function(error) {
      console.log("IP error:" + error);
    });

}


//get weather from RapidAPI weather api based on passed IP number
function getWeather(e) {

  const url = 'https://weatherapi-com.p.rapidapi.com/current.json?q=' + e;
  const options = {
    method: 'GET',
    headers: {
      'X-RapidAPI-Key': '9990b72cc3msh8189499bc9e6162p1008e6jsnafd5556ed080',
      'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
    }
  };

  console.log("weatherapi accessed");

  let data = fetch(url, options)
    .then(function(response) {
      if (response.ok) return response.json();
      else return Promise.reject(response);
    })

    .then(function(responseJSON) {
      console.log("Weather object: ");
      console.log(responseJSON);
      console.log("Temp in F: " + responseJSON.current.temp_f);
      document.querySelector("#tempF span").innerHTML = responseJSON.current.temp_f;
      document.querySelector("#tempC span").innerHTML = responseJSON.current.temp_c;
      document.querySelector("#weatherIcon").src = responseJSON.current.condition.icon;
      document.querySelector("#weatherText").innerHTML = responseJSON.current.condition.text;
      document.querySelector("#windMPH span").innerHTML = responseJSON.current.wind_mph;
      document.querySelector("#windKPH span").innerHTML = responseJSON.current.wind_kph;
      document.querySelector("#windDirection").innerHTML = responseJSON.current.wind_degree;
      document.querySelector("#humidity span").innerHTML = responseJSON.current.humidity;
      document.querySelector("#cloudCover span").innerHTML = responseJSON.current.cloud;
      document.querySelector("#city").innerHTML = responseJSON.location.name;
      document.querySelector("#state").innerHTML = responseJSON.location.region;
    })

    .catch(function(error) {
      console.log("Weather API error: " + error);

    });
}


// function to sumbit modals
function toggleModal() {
  document.querySelector("#modalCover").classList.toggle("hidden");
  document.querySelector("#modalPopup").classList.toggle("hidden");
}



// wait until DOM loads
document.addEventListener("DOMContentLoaded", function() {

  // show modal
  document.querySelector('button[name="showmodal"]').addEventListener('click', e => {
    toggleModal(); // show/hide modal
  });
  
  let formToSubmit = document.querySelector("#formBox");
  formToSubmit.addEventListener("submit", function(e) {

    e.preventDefault(); // don't let form submit

    // examine form code values
    let city = document.querySelector("#city").value;
    getWeather(city);

    let state = document.querySelector("#state").value;
    getWeather(state);
    toggleModal(); // show/hide modal

  });



});
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');
* {
  box-sizing: border-box;
}

body {
  background-color: rgb(186, 158, 158);
}

header {
  margin: 0;
  padding: 0;
  background-color: rgb(255, 184, 122);
  border-radius: 28px;
  justify-content: center;
  align-items: center;
}

a {
  font-family: "Rokkitt", sans-serif;
  font-size: 40px;
  display: flex;
  color: rgb(0, 0, 0);
  text-decoration: none;
  align-items: center;
}

.contentBox {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  justify-content: center;
  text-align: center;
  border-radius: 30px;
  background-color: bisque;
}


/*contentbox text*/

h2 {
  font-size: 50px;
  font-family: "Rokkitt", sans-serif;
  color: rgb(142, 49, 18);
}

p {
  font-size: 25px;
  font-family: "Rokkitt", sans-serif;
}

#modalCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

#modalPopup {
  position: absolute;
  width: 30vw;
  height: 60vh;
  left: 35vw;
  top: 20vh;
  padding: 1em;
  background-color: rgb(210, 151, 49);
  border: 6px solid rgb(81, 52, 6);
  border-radius: 30px;
  color: black;
  font-size: 200%;
}

.hidden {
  display: none;
}

p {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
<div id="modalCover" class="hidden"></div>

<div id="modalPopup" class="hidden">
  <form id="formBox">
    <p>Input Your City And State</p>
    <p><label for="city">City:</label> <input type="text" name="city" id="city" required></p>
    <p><label for="state">State:</label><input type="text" name="state" id="state" required></p>
    <button type="submit" id="submit">Submit</button>
    <button type="reset" id="cancel">Cancel</button>
  </form>
</div>
<header><a href="/tp8/index.html">Simple Weather App</a></header>
<button name="showmodal">Show modal</button>
<div class="contentBox">
  <div id="temp">
    <h2>Temp</h2>
    <p id="tempF">0<span></span>°F</p>
    <p id="tempC">0<span></span>°C</p>
  </div>

  <div id="weather">
    <h2>Weather Condition</h2>
    <p id="condition"><span>Light Rain</span></p>
    <img id="weatherIcon" src="">
  </div>

  <div id="wind">
    <h2>Wind</h2>
    <p id="windMPH">Wind Speed:<span> 0 </span> MPH </p>
    <p id="windKPH"><span>0</span> KPH</p>
    <p id="windDirection"><span class="direction">Direction:</span><span class="degree"> 0 </span>°</p>
  </div>

  <div id="humidity">
    <h2>Humidity</h2>
    <p id="humidity">Humidity:<span> 0 </span>%</p>
  </div>

  <div id="cloudCover">
    <h2>Cloud Cover</h2>
    <p id="cloudCover"><span> 0 </span>%</p>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.