Help with event listeners

Help with event listeners
0.0 0

#1

I’m working on the local weather app and have a few things I would like help with.

I’ve noticed that when I first load it it gives me the weather in Japan but when reloaded it works with my location. Is there a way I can fix this?

Is it possible to set the value in a div equal to a variable in js? I ask because the data get set to the div but I don’t know how to declare the temp as a var to use in a convert function.

How can I add an event listener to my button element with id convert? I have one under the place where I invoke the call to the API when the document is ready but it doesn’t work


#2

Japan thing
When passed with blanks for lat and lon your get request returns weather for that place in Japan.
https://fcc-weather-api.glitch.me/api/current?lat=&lon=
Somehow this is getting called before your code gets position data. You’ll have to track down why that is happening.

Event handler / temp thing
If you’re going to use jquery you’ll have to look at the docs about adding handlers - not the same as in javascript.

Below example changes C to F when you click. I saved temp from response object to variable named temperature. Just an example so not super useful by itself but it gives idea how to handle click event. A toggle button or a C button and an F button would be more practical for your project.

$('#convert').on("click",function() {
    //var temp = "#temp";
    //return temp * 9 / 5 + 32;
    $("#temp").html(temperature  * 9 / 5 + 32);
  });

Worth the time
https://learn.jquery.com/
Great for when you don’t have the time
jquery cheat sheet


#3

See the following thread on this issue. Your code is fine, it is just the API.


#4

For the japan issue i think you have to do a little research cos the app is reading my location just fine.
For temperature conversion, JQuery has its own method of adding event listeners, so you cannot use the native addEventListener method. Your code should look like this

// To change celsius  to fahrenheit
$( "#target" ).click(function() {
  var temp = $("#temp").text();  // You have to find a way to trim out the C 
  $("#temp").html(temp  * 9 / 5 + 32);
});

Cheers!!


#5

Awesome, thanks so much for the help and references.


#6

Thanks so much.I didn’t know to use the .text so that helped me a ton on that and figuring out how to get the values later.
Cheers!