Как вызвать функцию JavaScript несколько раз? - PullRequest
Новая
       14

Как вызвать функцию JavaScript несколько раз?

0 голосов
/ 01 июня 2019

Я использую API из OpenWeatherMap на своем веб-сайте, чтобы показывать погодные условия только некоторых определенных мест, всего на одной странице. Вот код: 

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>


<body>
  <input type="hidden" name="name" value="dehradun" id="cityName">
  <button onclick="getWeather()">Get weather of Dehradun</button>

  <div class="weatherResponse"></div>
  <br><br>

  <input type="hidden" name="name" value="pune" id="cityName">
  <button onclick="getWeather()">Get weather of Pune</button> '
  <div class="weatherResponse"></div>
  <br><br>

  <script>
    function getWeather() {
      $('.weatherResponse').html('');
      var cityName = $('#cityName').val();
      var apiCall = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=<apikey>';
      $.getJSON(apiCall, weatherCallback);

      function weatherCallback(weatherData) {
        var cityName = weatherData.name;;
        var country = weatherData.sys.country;
        var description = weatherData.weather[0].description;
        var temp = weatherData.main.temp;

        $('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
      }
    }
  </script>
</body>

Предположим, если я хочу показать погодные условия в двух местах, используя одну и ту же функцию Javascript, тогда он показывает одинаковый результат для обоих мест (Of Place (Dehradun), упомянутый первым в коде).

Помогите мне решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 01 июня 2019

Вы можете передать как название города, так и div (отображать результаты) в качестве параметра функции 

 function getWeather(cityName, className)
 {
 
  $('.'+className+'').html('');

  var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
  $.getJSON(apiCall,weatherCallback);

  function weatherCallback(weatherData)
  {
    var cityName= weatherData.name;;
    var country= weatherData.sys.country;
    var description= weatherData.weather[0].description;
    var temp= weatherData.main.temp;

     $('.'+className+'').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
  }
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<body>
<button onclick="getWeather('dehradun','wr1')">Get weather of Dehradun</button>
<br><br>
<div class="wr1"></div>
<br><br>
<button onclick="getWeather('pune','wr2')">Get weather of Pune</button>
<br><br>
<div class="wr2"></div>
<br>
</body>
0 голосов
/ 01 июня 2019

Я примерно добавил рабочий код ниже, когда вы нажимаете на кнопку, в обоих текстах будет отображаться отчет о городе, попробуйте нажать на кнопку и посмотрите: 

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>


<body>
<input type="hidden" name="name" value="dehradun" id="cityName2">
<button onclick="getWeather('dehradun')">Get weather of Dehradun</button>

<div class="weatherResponse"></div>
    <br><br>

<input type="hidden" name="name" value="pune" id="cityName1">
<button onclick="getWeather('pune')">Get weather of Pune</button>
    

 <br><br>
<div class="weatherResponse"></div>
<script>
 function getWeather(cityName){
$('.weatherResponse').html('');

var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
$.getJSON(apiCall,weatherCallback);

function weatherCallback(weatherData){
var cityName= weatherData.name;;
var country= weatherData.sys.country;
var description= weatherData.weather[0].description;
var temp= weatherData.main.temp;

$('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
}
}
</script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...