Estoy jugando con algo de HTML y JavaScript con el objetivo final de crear un sitio web simple que muestre el clima actual. No he usado API antes y tengo un conocimiento limitado de JavaScript, por lo que esta podría ser una muy mala pregunta. ¿Puedo cambiar la dirección del punto final en función de una entrada del usuario?
He escrito un front-end que muestra un formulario simple.
<section id="weather"> <div id="nav"> <div id="locate"> <div id="container"> <form action="index.js"> <label for="location">Location:</label> <input type="text" id="location" name="location" required> <input type="submit" value="Let's Go!"> </form> </div> </div> <div id="output"> <div id="container"> <!-- Output of API --> </div> </div> </div> </section>Estaba pensando que esto podría ejecutar un archivo JavaScript que recopila la entrada del archivo HTML del formulario y hacer algo como esto:
const location = document.getElementById(location) http://api.openweathermap.org/data/2.5/weather?q=${location}&APPID=APIIntenté programar algo para hacer esto, pero como tengo un conocimiento limitado de javascript y API, sigo fallando. Antes de dedicar mucho tiempo a esto, ¿alguien puede decirme si esto es posible? Por cierto, he configurado una clave de API, pero no la he mostrado.
Gracias,
señor
Entonces, esta es solo una forma muy larga de hacerlo para que pueda comprender cada paso.
Paso 1: primero desea obtener acceso al elemento de entrada:
const locationInput = document.getElementById("location");
Paso 2: entonces desea tomar el valor de ese elemento de entrada
const locationValue = locationInput.value;
Paso 3: Entonces querrás usar ese valor en la URL
const url = http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API
function fetchAPIData() { const locationInput = document.getElementById('location'); const locationValue = locationInput.value; const url = `http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API` // do the URL Request } document.addEventListener('DOMContentLoaded', () => { document.querySelector('input[type=submit]').addEventListener('click', fetchAPIData); }); <section id="weather"> <div id="nav"> <div id="locate"> <div id="container"> <form action="index.js"> <label for="location">Location:</label> <input type="text" id="location" name="location" required> <input type="submit" value="Let's Go!"> </form> </div> </div> <div id="output"> <div id="container"> <!-- Output of API --> </div> </div> </div> </section>Una forma mucho más corta sería:
const url = `http://api.openweathermap.org/data/2.5/weather?q=${document.querySelector("#location").value}&APPID=API`;