如何将“document.getElementById”与动态变量一起使用？

Question

我有以下代码，因为用户“no-deps”给了我....一般来说，我想从谷歌地图中的 poi 纬度和经度的变量中获取信息，一秒钟有关具有特定地图坐标的地点名称的可变信息。

问题在于代码的工作原理与返回 poi 的值一样好，但这仅发生在 div 的第一个 json 进程中。

我认为必须使用动态值定义 document.getElementById() 的引用变量，并作为第二步使用相同的动态变量定义 <div id="'+postid+'"></div>...

我试过了，但我这样做没有结果.....

代码如下：

<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

首先你应该知道 Javascript 是单线程的。

由于是单线程的，一次只能做一件事。

为了防止浏览器阻塞代码的执行，让更多的时间去做http请求，浏览器提供了web api。

web apis 有异步方法可以防止阻塞。当所有同步代码完成后，异步方法的回调函数就可以执行了。

回到你的情况，函数 Fetch 是一个异步方法。您只能在回调函数中获取json数据，因为回调函数是在您的同步代码之后执行的，这是您粘贴在问题描述上的最后一行代码。

希望有帮助！