Please help! javascript target variable

Please help! javascript target variable
0

#1

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,

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.


#3

Is this what you are trying to do:

HTML:

<a href="https://fcc-weather-api.glitch.me/api/current?lat=40.709896&lon=-74.008527" id="NewYork">New York Link</a>

JS:

$(document).ready(function() {
  $("#NewYork").on("click", function(e) {
    var cityIDlink = $(this).attr("href");
    $.ajax({
      url: cityIDlink
    });
  });
});

In the code you provided, you were not making use of:

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;

so I excluded the lines from my example.

If this is not what you want, try to explain exactly what you want to happen. If you have a Codepen link which shows all the code you have so far, that would help greatly.


#4

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.


#5

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


#6

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:


#7

Your project looks very nice! I am glad you were able to incorporated the cities into your weather project.

Each project has a set of user stories which need to be fulfilled in order for the project to be considered complete. Currently, you are only meeting 1 out of the 3 required. The user stories are:

User Story: I can see the weather in my current location.(You have met this requirement)

User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather. (Not met, because there is no special icon representing fog which is the current weather reported for my location currently.)

User Story: I can push a button to toggle between Fahrenheit and Celsius. (Not met, because instead of having a button which toggles between the two temperature units, you display both at the same time.)

Check out the demo to see how the two user stories above were accomplished.


#8

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)+'&deg;F').removeClass().addClass('fahrenheit');
        } else {
 $('#temperature').html(data.main.temp+'&deg;C').removeClass().addClass('celcius');
        }
}); 

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