//OpenWeather Info const weatherKey = '*********'; const weatherURL = 'https://api.openweathermap.org/data/2.5/weather' //Page Elements const input = document.querySelector("#input").value; const button = document.querySelector('#submit'); //Fetch const getWeather = async () => { try { const apiURL = weatherURL+ "?&q=" + input + "&APPID=" + weatherKey; console.log(apiURL); const response = await fetch(apiURL); if (response.ok) { const jsonResponse = await response.json(); console.log(jsonResponse); return jsonResponse; } else { console.log("request failed!"); } } catch (error) { console.log(error); } **}** const renderWeather = (data) => { document.querySelector("#weather-degrees").innerHTML = data.main.temp; } const executeSearch = () => { getWeather().then(data => renderWeather(data)); } button.addEventListener('click', executeSearch());No puedo obtener el valor de entrada cuando escribo en el cuadro de texto y no obtendrá la apiURL. Antes de escribir algo, la consola me da esto. ¿Alguna ayuda? registros de la consola
Su input se establece una vez de antemano. En su lugar, haz algo como:
const input = document.querySelector("#input"); // ... const apiURL = weatherURL+ "?&q=" + input.value + "&APPID=" + weatherKey; // or using a template literal const apiURL = `${weatherURL}?&q=${input.value}&APPID=${weatherKey}`;Tenga en cuenta que también debe codificar la URL de la entrada.
Dado que input solo se establece una vez ahora, se establece en una cadena vacía. Puede visitar directamente la URL de la API, es decir, https://api.openweathermap.org/data/2.5/weather?APPID=82510feaa0c1d3a300a7a754ff134404&q= y notar que no funciona. Si reemplaza q= con un valor adecuado, por ejemplo, q=London , funcionará bien.
Tenga en cuenta que la API también devolverá un error 400 (pero con un mensaje de error diferente) si le pasa una ciudad no válida. Lea el error del cuerpo de la respuesta y muestre correctamente un error al usuario sobre una entrada no válida.