JS中如何获取select的值

Question

如何获取选择更改城镇的值以获得天气信息？ 我尝试添加一些事件侦听器，但似乎无法使其正常工作。 我到底需要在哪里添加函数或事件侦听器才能获取值？抱歉，我试图理解这一切，但我仍然不确定。

const key = '';
if (key == '') document.getElementById('temp').innerHTML = ('');

function weatherApp(name) {
  fetch('https://api.openweathermap.org/data/2.5/weather?q=' + name + '&appid=' + key)
    .then(function(resp) {
      return resp.json()
    }) // Convert data to json
    .then(function(data) {
      drawWeather(data);
    })
    .catch(function() {
      // catch any errors
    });
}

function drawWeather(d) {
  var celcius = Math.round(parseFloat(d.main.temp) - 273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp) - 273.15) * 1.8) + 32);
  var description = d.weather[0].description;

  document.getElementById('description').innerHTML = description;
  document.getElementById('temp').innerHTML = celcius + '°';
  document.getElementById('location').innerHTML = d.name;

  if (description.indexOf('rain') > 0) {
    document.body.className = 'rainy';
  } else if (description.indexOf('cloud') > 0) {
    document.body.className = 'cloudy';
  } else if (description.indexOf('sunny') > 0) {
    document.body.className = 'sunny';
  } else {
    document.body.className = 'clear';
  }
}

window.onload = function() {
  weatherApp("Manchester");
}

<select class="form-control" id="selectCountry">
  <option>Select a country</option>
  <option disabled="">_________</option>
  <option value="Kabul,AF">Afghanistan</option>
  <option value="Luanda,AO">Angola</option>
  <option value="Canberra,AU">Australia</option>
  <option value="Vienna,AT">Austria</option>
</select>

Answer 1

根据我的理解，当 select 元素上的值发生更改时，您希望调用 weatherApp 函数。

为此，请使用 onchange< select 的 /a> 事件 元素。
当 值 用于选择 元素有改变了。

const key = '';

function weatherApp(name) {
  fetch('https://api.openweathermap.org/data/2.5/weather?q=' + name + '&appid=' + key)
    .then(function(resp) {
      return resp.json()
    }) // Convert data to json
    .then(function(data) {
      drawWeather(data);
    })
    .catch(function() {
      // catch any errors
    });
}

const formControl = document.getElementsByClassName("form-control")[0];

formControl.addEventListener("change", function() {
  weatherApp(formControl.value);
})

function drawWeather(d) {
  var celcius = Math.round(parseFloat(d.main.temp) - 273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp) - 273.15) * 1.8) + 32);
  var description = d.weather[0].description;

  document.getElementById('description').innerHTML = description;
  document.getElementById('temp').innerHTML = celcius + '°';
  document.getElementById('location').innerHTML = d.name;

  if (description.indexOf('rain') > 0) {
    document.body.className = 'rainy';
  } else if (description.indexOf('cloud') > 0) {
    document.body.className = 'cloudy';
  } else if (description.indexOf('sunny') > 0) {
    document.body.className = 'sunny';
  } else {
    document.body.className = 'clear';
  }
}

window.onload = function() {
  weatherApp("Manchester");
}

<select class="form-control" id="selectCountry">
  <option>Select a country</option>
  <option disabled="">_________</option>
  <option value="Kabul,AF">Afghanistan</option>
  <option value="Luanda,AO">Angola</option>
  <option value="Canberra,AU">Australia</option>
  <option value="Vienna,AT">Austria</option>
</select>