Avoir du mal à changer la longitude et la latitude dans l'application Javascript

Vous pouvez vérifier que changeLocationBtn existe vraiment et est trouvé lorsque l'auditeur est lié, il est également préférable d'ajouter le sélecteur changeLocationBtn près de changeLocationBtn.addEventListener pour vérifier s'il est toujours en contexte.

 const changeLocationBtn = document.querySelector(".change-location-btn");
 console.log('btn', changeLocationBtn )
 changeLocationBtn.addEventListener("click", function() {
        longitude = (Math.random() * (80 + 180) + -180).toFixed(3);
        latitude = (Math.random() * (90 + 90) + -90).toFixed(3);
        console.log(latitude, longitude);
  });

Commencer ici:

 // Event Listeners
window.addEventListener("load", () => {
  let longitude;
  let latitude;

  const degreeCelcius = document.querySelector(".celcius");
  const weatherDescription = document.querySelector(".description");
  const changeLocationBtn = document.querySelector(".change-location-btn");
  const weatherLocation = document.querySelector(".location");

  // Here lies the problem
  changeLocationBtn.addEventListener("click", function() {
    longitude = (Math.random() * (80 + 180) + -180).toFixed(3);
    latitude = (Math.random() * (90 + 90) + -90).toFixed(3);
    console.log(latitude, longitude);
  });

Votre code actuel n'envoie qu'une seule donnée, lorsque la page est chargée. J'ai modifié le code JS pour qu'il fonctionne à la fois avec les événements onLoad et click. Mais le changement des données affichées est très lent. Et j'ai expérimenté que l'API météo ne fonctionnait qu'avec les coordonnées au sol, ne fonctionnant pas dans les mers et les océans.

const degreeCelcius = document.querySelector(".celcius");
const weatherDescription = document.querySelector(".description");
const changeLocationBtn = document.querySelector(".change-location-btn");
    
const weatherLocation = document.querySelector(".location");

const corsProxy = 'https://cors-anywhere.herokuapp.com/';

function change_location(longitude,latitude){
                
    const api = ${corsProxy}http://api.weatherapi.com/v1/current.json?key=7391e8544809410cbf0120949201511&q=${latitude}, ${longitude}`;

    // Fetch data from the API
    fetch(api)
    .then(response => {
        //console.log(response);
        return response.json();
    })
    .then(data => {
        console.log(data);
        const {
           temp_c,
           condition
        } = data.current;

        degreeCelcius.textContent = temp_c + '°C';
        weatherDescription.textContent = condition.text;
        weatherLocation.textContent = data.location.name + ", " + data.location.country;
    });
}

// Event Listeners
window.addEventListener("load", () => {
    let longitude;
    let latitude;

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            longitude = position.coords.longitude;
            latitude = position.coords.latitude;
            console.log("Current location: " + latitude, longitude);

            change_location(longitude,latitude);
        });
    }
});

changeLocationBtn.addEventListener("click", function() {
    longitude = (Math.random() * (80 + 180) + -180).toFixed(3);
    latitude = (Math.random() * (90 + 90) + -90).toFixed(3);
    console.log(latitude, longitude);

    change_location(longitude,latitude);
});`