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

Я использую 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, тогда она покажет один и тот же результат для обоих мест (место (Dehradun), упомянутое первым в коде).

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


javascript api html openweathermap jquery
person Shruti Vaishya    schedule 01.06.2019    source источник
comment
Вы должны использовать класс вместо идентификатора, и ваша проблема будет решена.   -  person Shail_bee    schedule 01.06.2019
comment
Вы имеете в виду внутри тега ‹input›? ... Если так, то я пробовал, это не работает.   -  person Shruti Vaishya    schedule 01.06.2019
comment
Я добавил рабочий код, передав значение функции и обновив ваши идентификаторы, позже очистим код.   -  person Shail_bee    schedule 01.06.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете передать как название города, так и элемент 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>

person Shovon Das    schedule 01.06.2019

arrow_upward
0
arrow_downward

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

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

person Shail_bee    schedule 01.06.2019
comment
Да, теперь он показывает результат обоих городов, большое спасибо. Но да, он показывает результат один в обоих текстах, пожалуйста, помогите мне решить эту проблему. Я думаю, что это как-то связано с ‹div class=weatherResponse›, который нужно изменить для обоих. - person Shruti Vaishya; 01.06.2019