Tengo dos botones para alternar entre ciudades para una API meteorológica.
Cuando asigno la variable que se determinará haciendo clic en el botón:
TButton.addEventListener("click", TWeather); function TWeather(){ outputDiv.style.display = "block"; const buttonCity = "Toronto"; };la URL de la API no lo reconocerá.
const url = "https://api.openweathermap.org/data/2.5/weather?q=" + buttonCity + "&appid=" + myAPIkey + "&units=metric";Funciona si configuro la variable fuera de la función del botón.
El problema es que está definiendo la variable buttonCity en la función TWeather para que la variable solo esté disponible en el ámbito de esa función. Lea lo siguiente: https://www.w3schools.com/js/js_scope.asp
Tendrá que asignar esta variable donde también sea accesible para la otra función.
Ejemplo:
let currentCity = ''; TButton.addEventListener("click", TWeather); function TWeather(){ outputDiv.style.display = "block"; currentCity = "Toronto"; };Y luego API LLAMADA:
const url = "https://api.openweathermap.org/data/2.5/weather?q=" + currentCity + "&appid=" + myAPIkey + "&units=metric";Creo que const es una variable local, no global. Defina su variable después de addEventListener fuera de la función y pruébelo.
No especificó lo que quería hacer con la URL, así que simplemente hice un console.log .
Aquí creo un objeto y agrego algunas propiedades, incluidas algunas funciones para agregar el controlador de eventos. También agregué la ciudad de destino a cada botón como un atributo de datos y luego la saqué del controlador de eventos.
Quizás esto sea un poco exagerado, pero ilustra algunas formas de evitar las variables globales y hacer que pueda agregar más botones al HTML sin ningún cambio de código.
var myapp = { url: { base: "https://api.openweathermap.org/data/2.5/weather?q=", api: "&appid=", unit: "&units=metric" }, apiKey = "key", baseSelector:".weather-toggle", buttons: {}, init: function() { const app = this; this.buttons = document.querySelectorAll(this.baseSelector); this.buttons.forEach(function(button, index, buttons) { button.addEventListener("click", this.toggleWeather, false); },this); }, toggleWeather: function(event) { const targetCity = event.target.dataset.targetCity; const url = myapp.url.base + targetCity + myapp.url.api + myapp.apiKey + myapp.url.unit; console.log(url); } }; myapp.init.apply(myapp); <button class="weather-toggle" type="button" data-target-city="Toronto">Toronto</button> <button class="weather-toggle" type="button" data-target-city="NewYork">New York City</button> <button class="weather-toggle" type="button" data-target-city="Boston">Boston</button>