Javascript innerHTML的三个实例正在工作，第四个不工作

我对编程一无所知，所以请耐心等待。我最近才完成了一大块代码，读了几本书，所以我肯定是个书呆子。我已经设置了一个函数，通过GoogleMapsAPI迭代GooglePlaces库调用的结果，并将返回对象的属性写入HTML中的元素。我用innerHTML的前三个实例成功地做到了这一点（使用stackoverflow社区的一些帮助，谢谢大家！）。我在第四次审判中遇到了一个大问题

我给谷歌地图提供的距离矩阵服务打了个电话，经过几个小时的修补，终于让它开始工作了，因为console.log命令似乎返回了我想要的结果。但是FoodInstance[0]。innerHTML=距离不起作用！这让我快发疯了。这是我的代码，你知道我在说什么，以防不清楚：

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < 10; i++) {
        var place = results[i];
        createMarker(place);
        var foodName = foodArray[i].getElementsByClassName("listing_name");
        var foodRating = foodArray[i].getElementsByClassName("listing_rating");
        var foodAddress = foodArray[i].getElementsByClassName("listing_address");
        var foodDistance = foodArray[i].getElementsByClassName("listing_dist");
        foodName[0].innerHTML = place.name;
        foodRating[0].innerHTML = place.rating;
        foodAddress[0].innerHTML = place.vicinity;
        distanceService.getDistanceMatrix({
            origins: [houston],
            destinations: [place.geometry.location],
            travelMode: google.maps.TravelMode.DRIVING,
            avoidHighways: false,
            avoidTolls: false,
            unitSystem: google.maps.UnitSystem.IMPERIAL
          }, distanceCallback);
        function distanceCallback(response, status) {
          if (status == google.maps.DistanceMatrixStatus.OK) {
              var origins = response.originAddresses;
              for (var x = 0; x < origins.length; x++) {
                var results = response.rows[x].elements;
                for (var j = 0; j < results.length; j++) {
                  var element = results[j];
                  var distance = element.distance.text;
                  foodDistance[0].innerHTML = distance;
                  console.log(distance);
                }
              }
            }
          };
        };
      }
    }

函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（变量i=0；i<10；i++）{
var地点=结果[i]；
创建标记（位置）；
var foodName=foodArray[i].getElementsByClassName（“清单名称”）；
var foodRating=foodaray[i].getElementsByClassName（“清单_评级”）；
var foodAddress=foodaray[i].getElementsByClassName（“清单地址”）；
var foodDistance=foodArray[i].getElementsByClassName（“列表区”）；
foodName[0]。innerHTML=place.name；
foodRating[0]。innerHTML=place.rating；
foodAddress[0]。innerHTML=place.neighboration；
distanceService.getDistanceMatrix({
来源：[休斯顿]，
目的地：[地点.几何体.位置]，
travelMode:google.maps.travelMode.DRIVING，
避免：错误，
避免：错误，
unitSystem:google.maps.unitSystem.IMPERIAL
}，距离回调）；
函数距离回调（响应、状态）{
if（status==google.maps.DistanceMatrixStatus.OK）{
var origins=response.originAddresses；
对于（var x=0；x

这是带有填充内容的HTML。清单\名称、清单\评级和清单\地址均按预期填充：

 <div class="hyperlocal_listing_snippet" id="fd1">
  <div class="listing_name">Stephen's bombass burritos</div>
  <div class="listing_dist">0.2 Miles</div>
  <div class="listing_address">blah blah blah</div>
  <div class="listing_rating">3.2</div>
</div>

Stephen's bombass玉米煎饼
0.2英里
废话废话
3.2

---

提前感谢您的反馈。让我抓狂的是，前三个工作得很好，但第四个就是不配合。我不是在寻找一双新的眼睛来帮我找出我愚蠢的noob错误，就是在寻找一个解释，解释为什么这不起作用。谢谢

您的函数

distanceCallback

是异步函数。当调用此回调函数

distance callback

时，

foodInstance[0]

包含无效或不同的值，因为您正在更新父函数中

的
循环中的变量
foodInstance
，这是循环中异步函数的典型问题

尝试将此项添加到（…）{
行的
后面：

(function(i) {

在相应的
}
之前：

})(i);

这将“锚定”i的值
并解决您的问题。
如果FoodInstance[0]存在，它应该可以工作。确保FoodInstance[0]不为null。如果没有看到HTML，我们就无法检查它。我不想发布整个内容，因为它太长了，但是FoodInstance[0]确实存在，并且没有设置为null。它设置了填充内容，如foodName[0]、foodAddress[0]和foodRating[0]。我将更新我的原始帖子，以便您可以看到HTML.Annnnd…每个代码段都位于名为FoodInstance的数组中。您确定没有将其设置为某个值，然后在稍后的循环迭代中将其更改为空白吗？也许谷歌在末尾加了一个空元素？当您运行控制台时，它实际上说了什么？console.log（FoodInstance）怎么说？它工作了！非常感谢你在周日午夜回答我的问题。你应该得到77973点声誉积分中的每一点。我会投票，但我没有足够的分数。我的noob身份闪耀着光芒。再次感谢！