Problem about Passing data among functions

JavaScript
#1 
function getWeatherData () {

navigator.geolocation.getCurrentPosition((success) => {

let {latitude, longitude } = success.coords;

fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=hourly,minutely&units=metric&appid=${API_KEY}`)

.then(res => res.json())

.then(data => {

console.log(data)

**showWeatherData(data)**;

})

})

}

function *showWeatherData (data)*{

let {humidity, pressure, sunrise, sunset, wind_speed} = data.current;

timezone.innerHTML = data.timezone;

countryEl.innerHTML = data.lat + 'N ' + data.lon+'E'

currentWeatherItemsEl.innerHTML =

Source Code: https://codepen.io/KenJP/pen/BaPBbWZ

Why can’t I pass the data from api as argument between functions like the above example code “showWeatherData (data)”?
The problem will occur when the word “temperature min” in the blue or black area is clicked. Since the data will not changed accordingly.

e.g 1: “display1(data1.city, data1.list)” and “function display1(passdata, passdata2)”,

e.g 2: “display3(data1)” and “function display3(passdata3)”

Source: https://codepen.io/KenJP/pen/GRBKeLM

#2

What exactly is not working? If you remove the calls to undefined TestTem() function everything seems to be working :thinking:

#3

The problem will occur when the word “temperature min” in the blue or black area is clicked. Since the data will not changed accordingly.

#4

You’re trying to pass it from HTML which doesn’t know about the data in JS.

#5

Sorry, Did you mean that

function display3(passdata3) {
      const { city, list } = passdata3;
  
    region.textContent = `region:${city.name}`;

It passed the data from HTML?
how can the data be displayed on the monitor by HTML ?

#6

In your HTML you have this line:
<div class="city-name" onclick="display1(passdata, passdata2)">
There is no passdata nor passdata2 available.

#7

onclick=“display1(passdata, passdata2)” is used to invoke the function display1(passdata, passdata2) in javascript

#8

And when you invoke a function you need to pass arguments, and those argument must be in the “visibility” of the called function.

For example if there’s a function somewhere that adds numbers I can’t just call it like

add(number1, number2)

without defining number1 and number2 beforehand.

#9

But I have defined “passdata” and “passdata2” as “data1.city” and “data1.list” respectively. Both of them can be found as a callback function “display1(data1.city, data1.list)” in function getData().

Why are they still undefined??

#10

That’s not how JS works. Those variables are defined inside the function, but you’re calling display1(passdata, passdata2) from the global scope which has no access to those variables.

One quick (but not very good) solution would be to move definition of those variables to the global scope (on the same level as const day = new Date();) and then reassign them in getData().

#11

In the example code,
function getWeatherData () can pass data by using callback function “showWeatherData(data)” and “data” is apparently a parameter. Then, function showWeatherData (data) can obtain data.

Why does the example code work?

Here is the link of example source code: https://codepen.io/KenJP/pen/BaPBbWZ

#12

Because data is on the same level as showWeatherData().

Your code is completely different from the example. You can’t just move stuff around and expect for everything to be working as before.

#13

How to recognize whether the data is or not on the same level as showWeatherData() ?

#14
#15

I pored over this article before. And I would also like to know alternative solutions apart from that quick approach. Also, what makes function getWeatherData () call the showWeatherData(data) from the global scope successfully?