Please help! javascript target variable

Hi all, here i am again yet asking another question which i hope not a stupid one.
So i am in this situation where i want to target one of this link variable to be used on my Ajax url. However, this function are based on click. So i need to get the ID of the clicked item first before assigning which link variable that i will put to the Ajax url.
But it appears that you cannot target another variable indirectly, just by having the same name.
I hope that you guys understand what i’m saying and can help me with this one.
Also, I dont want to make click event on each item because its too long, and the only difference are to assign a link to the Ajax url.
Thank you guys for your help :slight_smile:

var HKlink = 'https://fcc-weather-api.glitch.me/api/current?lat='+HKlat+'&lon='+HKlon;
var NYlink = 'https://fcc-weather-api.glitch.me/api/current?lat='+NYlat+'&lon='+NYlon;
var SHlink = 'https://fcc-weather-api.glitch.me/api/current?lat='+SHlat+'&lon='+SHlon;

var cityIDlink = $(this).attr('id')+'link';

$.ajax( {
  url: cityIDlink,

Thank you for edited my post, i was wondering myself how to post code in that format.
Sorry if it’s unclear as i am often do not even understand the problem itself.

Basically when i click New York, i want to assign New York coordinates link variable to the Ajax url.
This is the codepen, it is under OTHER CITIES comment section.

One solution for the other cities would be to create an object to contain the lat and lon of each city. Then you would get the id of the img for the city clicked and get the applicable objects property values.

You would replace:

  //----------------OTHER CITIES-------------//
  $('.cities').on('click', othercitylocation);

  function othercitylocation() {
    var HKlink = 'https://fcc-weather-api.glitch.me/api/current?lat=22.28552&lon=114.15769';
    var FFlink = 'https://fcc-weather-api.glitch.me/api/current?lat=50.110924&lon=8.682127';
    var NYlink = 'https://fcc-weather-api.glitch.me/api/current?lat=40.730610&lon=-73.935242';
    var SHlink = 'https://fcc-weather-api.glitch.me/api/current?lat=31.267401&lon=121.522179';
    var cityID = $(this).attr('id') + 'link';
    $.ajax({
          url: cityID,

with the following:

  //----------------OTHER CITIES-------------//
 
  $('.cities').on('click', othercitylocation);

  function othercitylocation() {
    var cityCoords = {
      HK: { lat: 22.28552, lon: 114.15769 },
      FF: { lat: 50.110924, lon: 8.682127 },
      NY: { lat: 40.730610,  lon: -73.935242 },
      SH: { lat: 1.267401, lon: 121.522179 }
    }
    var cityID = $(this).attr('id');
    var lat = cityCoords[cityID].lat;
    var lon = cityCoords[cityID].lon;
    var cityURL = 'https://fcc-weather-api.glitch.me/api/current?lat=' + lat + '&lon=' + lon;

    $.ajax({
          url: cityURL,

NOTE - I could not see any of the images, because they are not public. I get a 403 error for each image in the console. If I paste the url into the address bar of my browser, I get the following:

image

1 Like

Finallyyyyyy, after struggling for several days, it is finished!!!
Thank you so much for your help, it is really encouraging to know that someone is there to help :smiley:
This is the finished product, please feel free to give criticism and feedback if you want.
Thank you again for your help, it really means a lot :slight_smile:

EDIT: Nevermind. it looks like i have figured out the problem. Thanks man!

Hello again, thank you so much for your feedback!
Thanks to your code earlier, i have able to clean up my code a lot.

I have added fog to the weather condition and also clickable degree options.
However i have 1 more problem regarding the C to F options, and i do not understand where it went wrong, as it works…so some extent.
It able to be clicked back and forth, however if i changes the city, sometimes it works, but sometimes its not. Also, the clickable area to change the degree runs across the screen when i just want to to be pointer when it hover over the degree.

I’m sorry if i ask too much. Hope you have not get enough of me yet.
Thank you again for your help :slight_smile:

$('#temperature').on('click', function (){
  if ($('#temperature').hasClass('celcius')) {
    $('#temperature').html(Math.round(data.main.temp*1.8+32)+'°F').removeClass().addClass('fahrenheit');
        } else {
 $('#temperature').html(data.main.temp+'°C').removeClass().addClass('celcius');
        }
}); 

If you want to see the full code, it is located at the bottom under comment Celsius to Fahrenheit.