Function to change a variable that was called on an endpoint and reload the page with the new value

Hi,

I have a problem here that I could not find a solution on google.
I am doing the weather app and I want to include a function to change the language.
So I created 3 div with the same class “lang” and different ids (EN, PT, DE)

on the endpoint I have a variable called lang and it retrieves the value of a div.

After the request is already done, changing that div doesn’t affect my function and doesn’t change the language.

var lang

$('.lang').click(function() {
   var id = event.target.id;
    $(".language").text(id)   

// I need to trigger the getWeather function with the new value for the language

   });


 var getWeather = function(data) { 
 lang = $(".language").text()
  $.getJSON('http://api.openweathermap.org/data/2.5/weather', {
        lat: data.lat,
        lon: data.lon,
        lang: lang,
        city: data.city,

html


 <div class = "lang" id = "de">DE</div>
  <div class = "lang" id = "en">EN</div>
  <div class = "lang" id = "pt">PT</div>
  <div class = "language"></div>

When I open the page the request is made and it works.

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Thank you and Sorry for that. That was my first post and I didn’t have a look at this page.
Thanks.

No worries. We’re here to help :slight_smile:

event is undefined inside your .click() handler. You need to pass the event object into the function as an argument.

https://api.jquery.com/click/

Hi.
I don’t think I understood that very well.

The function to change the div works normally. I can see the option that was clicked on the div with the class language.
The problem I have is that after changing the value of the div language I want assign that to a variable called lang and include that on the endpoint.

When the page loads the request for the weather is made. If I click the function to change the language I cant include the new variable with the new language settings anymore. I tried to pass the getWeather as an argument but it didn’t work.

I must be looking at something else, or I don’t understand. But for me, the language change function does not work. “de” is displayed on page load, but clicking on any of the “DE”, “EN”, “PT” logs an error to console: “event is not defined”

This fix is easy:

$('.lang').click(function(event) {  // <-- add 'event' here
   var id = event.target.id;
    $(".language").text(id)  
  lang =  $(".language").text()
  
});

The fix for your main question … You need to trigger the AJAX request from your .click() handler. This could be as simple as copy/paste your $.getJSON call into the .click() handler, but that’s not the most elegant solution!

I thought about doing this as well but was just looking for the cleaner option. I had the event as an argument as well but it didn’t solve my main problem so I deleted it causing the error you saw.

I will try again and if anything changes I will post here.

Thanks for helping me.

The function to change the language was actually working. the problem was that I didn’t call the one that shows the weather on the page and write all the informations.

Thank you very much for your help.