¿Cómo puedo obtener el valor de seleccionar para cambiar la ciudad con el fin de obtener la información meteorológica? Intenté agregar algunos detectores de eventos, pero parece que no puedo hacerlo funcionar. ¿Dónde exactamente necesito agregar la función o el detector de eventos para obtener el valor? Lo siento, estoy tratando de entenderlo todo, pero todavía no estoy seguro.
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>Según lo que entendí, desea llamar a la función weatherApp cuando el valor en el elemento select ha cambiado.
Para esto, use el evento onchange para el elemento select . Este evento se activará cuando el value de un elemento select haya cambiado.
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>