How can I get the value on select to change the town in order to get the weather info? I tried adding some event listeners but cannot seem to get it working. Where exactly do I need to add the function or the event listener to get the value? Sorry, I am trying to understand it all but I'm still not sure.
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>Based on what I understood, you want to call the weatherApp function when the value on the select element has changed.
For this, use the onchange event for the select element.
This event will fire when the value for a select element has changed.
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>