如何在动态变量中使用“ document.getElementById”？

Question

I have the following code, as user "no-deps" gave to me.... As general idea, I want to get information from a variable with latitude and longitude of a poi in google maps, getting in a second variable information about name of place with specific map coordinates.

The problem is that the code works as good as return the value of poi but this is happened in the first only div in json process.

I think that with a way must defive with a dynamic value the referred variable of document.getElementById() and as second step to define <div id="'+postid+'"></div> with the same dynamic variable...

I've tried but this as I did has no result.....

The code is the following:

<script type='text/javascript'>
        //<![CDATA[ 
function favouritePosts(json) {
var post_id;
var Lat_long;               // dynamic var with lang and lat information

fetch('https://open.mapquestapi.com/geocoding/v1/reverse?key=jzZATD7kJkfHQOIAXr2Gu0iG62EqMkRO&location='+Lat_long+'')
        .then((data) => {
            return data.json();
        })
        .then((json) => {
                const result = json.results[0].locations[0];
          document.getElementById("output").innerHTML= result.street&","&result.postalCode;
        })
        .catch((err) => {
            console.log(err);
        });
var item = '<div id="'+postid+'"></div>';
        document.write(item);
        }
}
 //]]>
 </script>

Answer 1

The first thing you should know is that Javascript is single-threaded.

Since it's single-threaded, it can only do one thing at a time.

To prevent the brower blocks on the code' execution, which makes more time to do such as the http request, the brower provides the web apis.

The web apis has asynchronous methods can prevent blocking. When all the synchronous code is completed, the asynchronous method's callback function can execute.

Back to your situation, function Fetch is a asynchronous method. You can only get the json data in the callback function because the callback function is executed after your synchronous code, which is your last line code pasted on the question description.

Hope that helps!