innerHTML的三个实例正在工作，第四个没有

Three instances of innerHTML are working, the fourth is not

本文关键字：四个 工作 三个 实例 innerHTML      更新时间：2023-09-26

我对编程完全陌生，所以请耐心等待。我最近才完成了Codecademy的一大部分，也读了几本书，所以我绝对是个新手。我已经设置了一个函数，它通过Google Maps API迭代Google Places库调用的结果，并将返回对象的属性写入HTML中的元素。我成功地使用了innerHTML的前三个实例(使用了stackoverflow社区的一些帮助，谢谢大家!)。我在第四个实例中遇到了一个大问题。

我打电话给谷歌地图提供的距离矩阵服务，经过几个小时的修补，我终于让它工作了，因为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>

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

您遇到了循环中异步函数的经典问题。

试着在for(...) {行后面添加这个:

(function(i) {

在相应的}之前:

})(i);

这将"锚定"i的值，并解决您的问题。

您的函数distanceCallback是异步函数。当此回调函数distanceCallback被调用时，foodDistance[0]包含无效或不同的值，因为您正在父函数

中的for循环中更新变量foodDistance。
相关文章：