javascript - 无法获取 javascript weather api 应用程序来显示天气

Question

  /* add a input box to enter city name
   apply a submit button on the page
   when user inputs city make sure a function calls openweather app
   when city is entered display results should include
   city name, current temp, weather description, min temp,max temp.
   once city is picked results should display but also change when adding an
   if statment to check if the weather is either above 85 degree or below 40 */

    $(function () {

      $('#search').submit((event) => {
        event.preventDefault()
      //console.log('form being submitted')

      })

        function displayCity(weather) {
          console.log(weather)
          // note added async to function
            function searchCity(search)

                const url = 'https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=f674d7dcd4f4a4860d1b6eede3761c6c'     
            // make API request using #.ajax()
               $.ajax({
                 url: url,
                 type: 'GET',
                 data: { q: searchTerm }

               })
               .done((response) => {
                 console.log(response)
                 // get response from successful API call and
                 // pass response data to the updateUi() function
                 displayResults(response)
               })
               .fail((error) => {
                 console.log(error)
                 alert('an error occurred')
               })
             }

             function chooseCity(city) {
              const cityName = city.name
              const cityTemp = city.main.temp
              const cityDescription = city.weather.description
              const cityTempMin = city.temp_min
              const cityTempMax = city.temp_max

              //adding jquery to update the UI
                  $('.city').text(cityName)
                  $('.temp').text(cityTemp)
                  $('.description').text(cityDescription)
                  $('.tempMin').text(cityTempMin)
                  $('.tempMax').text(cityTempMax)
                 }

              })

我已经写了将近 2 个月的 javascript，它并不容易理解，因为我对 HTML 和 CSS 的了解很浅。 我一直在删除和添加代码，但似乎无法弄清楚如何让我的 API 在用户选择城市时显示天气。

Answer 1

您的代码库中几乎没有问题。

1. { 在 searchCity
之前丢失
2. displayCity 和 searchCity 未被调用。他们刚刚宣布。
3. 您使用了 displayResults 而不是 chooseCity
4. searchTerm 未定义。应该是 search

/* add a input box to enter city name
   apply a submit button on the page
   when user inputs city make sure a function calls openweather app
   when city is entered display results should include
   city name, current temp, weather description, min temp,max temp.
   once city is picked results should display but also change when adding an
   if statment to check if the weather is either above 85 degree or below 40 */

    $(function () {

      $('#search').click((event) => {
        event.preventDefault()
        displayCity(event.target.value);
      })

        function displayCity(weather) {
          searchCity(weather);
          // note added async to function
            function searchCity(search) {
              const url = 'https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=f674d7dcd4f4a4860d1b6eede3761c6c'     
              // make API request using #.ajax()
                 $.ajax({
                   url: url,
                   type: 'GET',
                   data: { q: search }

                 })
                 .done((response) => {
                   console.log(response)
                   // get response from successful API call and
                   // pass response data to the updateUi() function
                   chooseCity(response)
                 })
                 .fail((error) => {
                   console.log(error)
                   alert('an error occurred')
                 })
               }

                

             function chooseCity(city) {
              const cityName = city.name
              const cityTemp = city.main.temp
              const cityDescription = city.weather.description
              const cityTempMin = city.temp_min
              const cityTempMax = city.temp_max

              //adding jquery to update the UI
                  $('.city').text(cityName)
                  $('.temp').text(cityTemp)
                  $('.description').text(cityDescription)
                  $('.tempMin').text(cityTempMin)
                  $('.tempMax').text(cityTempMax)
                 }

              }
              });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="search" name="search" type="button" value="Click me!"/>