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

Question

我有以下代码，正如用户 "no-deps" 给我的那样....一般来说，我想从 google 中一个 poi 的经纬度变量中获取信息地图，获取有关具有特定地图坐标的地点名称的第二个变量信息。

问题是代码的效果与 return poi 的值一样好，但这只发生在 json 进程的第一个 div 中。

我认为必须使用一种方法来定义 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 是 single-threaded。

因为是single-threaded，一次只能做一件事。

为了防止浏览器阻塞代码的执行，从而腾出更多时间来执行诸如 http 请求之类的操作，浏览器提供了 web api。

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

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

希望对您有所帮助！

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

How to use "document.getElementById" with dynamic var?

javascript

google-maps

reverse-geocoding