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

我对编程完全陌生，所以请耐心等待我。我最近才完成了大量的Codecademy，并阅读了几本书，所以我绝对是一个小菜鸟。我已经设置了一个函数，通过Google Maps API遍历Google Places库调用的结果，并将返回的对象的属性写入HTML中的元素。我成功地使用了innerHTML的前三个实例（使用一些来自于stackoverflow社区的帮助，谢谢大家！）。第四例我遇到了一个巨大的问题。innerHTML的三个实例正在工作，第四个不是

我打了一个电话的距离矩阵服务，谷歌地图提供的，我终于得到了它的修修补补数小时后工作，因为的console.log命令似乎回到我想要的东西。但foodDistance [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); 
       } 
       } 
      } 
      }; 
     }; 
     } 
    }

而这里是带填充内容的HTML。 listing_name，listing_rating和listing_address全部按预期填充：

<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>

在此先感谢您的反馈意见。让我疯狂的是前三名完美的工作，但第四名却不合作。我要么寻找一个新的眼睛来帮助我挑选我愚蠢的noob错误，要么我正在寻找一个解释，为什么这不起作用。谢谢！

来源

2013-03-04 FuriouStyles

它应该工作，如果foodDistance [0]存在。确保foodDistance [0]不为空。没有看到HTML，我们不能检查它 – 999k 2013-03-04 04:26:31

谢谢。我不想发布整个事情，因为它非常冗长，但是foodDistance [0]确实存在并且未设置为null。它设置了填充内容，如foodName [0]，foodAddress [0]和foodRating [0]。我会更新我的原始文章，以便您可以看到HTML。 – FuriouStyles 2013-03-04 04:56:19

Annnnd ....每个片段位于一个名为foodDistance的数组中。 – FuriouStyles 2013-03-04 05:03:24

。

尝试for(...) {行之后添加此权：

(function(i) {

而造成相应的}在此之前右：

})(i);

这将 “锚” 的i价值，并解决您的问题。

来源

2013-03-04 05:55:57

它flippin'工作！非常感谢你在星期天的午夜回答我的问题。你应得到77,973个声望点中的每一个。我会喜欢，但我没有足够的分数。我的新人地位如此耀眼。再次感谢！ – FuriouStyles 2013-03-04 17:28:13

很高兴我能帮忙:) – 2013-03-04 18:59:23

您的功能distanceCallback是异步功能。当这个回调函数distanceCallback被称为foodDistance[0]包含无效或不同的价值，因为你要更新变量foodDistance在for循环您是从异步函数的经典问题在一个循环的痛苦父功能

来源

2013-03-04 05:43:35 999k

你说这个问题的来源，但不提供任何实际的解决方案... – 2013-03-04 05:56:21

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

回答

相关问题