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的三個實例正在工作，第四個不是

回答

相關問題