Question

我在js中有一个函数，循环遍历google distancematrix api返回的每个团队的旅行时长。

我可以从这个循环中获取所需的数据，但是我在将这些数据成功传递给我的命名div时遇到了问题。

所以我有三支队伍，AAMG，tturbo和thor。我在一个名为team的数组中声明了这些。这些团队中的每一个都有一个以他们命名的div。

如果我声明了他们的getElementById并提醒它，它告诉我，我确实在我的函数中有它们。如果我然后弹出警报以确保我的团队和持续时间值匹配，则会返回我期望的内容：每个团队匹配不同的持续时间。

如果我尝试将其写入指定的div，我会在浏览器控制台中不断出现以下错误。

'未捕获的TypeError：无法读取null'
的属性'innerHTML'

有人能指出我做错的方向吗？

JS功能：

function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
} else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;

    var AAMG = document.getElementById('AAMG');
    //alert(aamg);
    var tturbo = document.getElementById('tturbo');
    //alert(tt);
    var thor = document.getElementById('thor');
    //alert(thor);
var teamsbyname = "AAMG, thor, tturbo";
var team = teamsbyname.split(',');

    for (var i = 0; i < origins.length; i++)
        {
        //var teams=team[i];
        //alert(teams);
        var results = response.rows[i].elements;    
        document.getElementById(team[i]).innerHTML += results[i].duration.text; 
        //alert('Team: ' + team[i] + '. Time to Monaco: ' + results[i].duration.text);
        }
    }
}

HTML：

<body>
    <div class="container">
        <div id="googleMapLS" >
        </div>

        <div id="updatesRS">
        <ul>
            <h3>Team Anti-AMG:</h3>
            <p>Time to Monaco: </p>
            <div id="AAMG"></div>
            <p></p>
            <h3>Team Thor:</h3>
            <p>Time to Monaco: </p>
            <div id="thor"></div>
            <p></p>
            <h3>Twin Turbo:</h3>
            <p>Time to Monaco: </p>
            <div id="tturbo"></div>
            <p></p>
            <p></p>
            <div id="closest"></div>
            <h2>Team Anti-AMG are in the lead!!</h2>
            <p><button type="button" onclick="calculate();">Calculate distances</button></p>
        </ul>    
        </div>

    </div>
</body>

Answer 1

以下行是导致错误的原因：

var teamsbyname = "AAMG, thor, tturbo";
var team = teamsbyname.split(',');

他们返回的数组是：

["AAMG", " thor", " tturbo"]

第二个元素是" thor"。注意领先的空间。并且您在DOM中没有id为" thor"的元素。

因此，要解决此问题，您有以下2个选项： 1.直接在数组中分配值，而不是分割字符串。 var team = [“AAMG”，“thor”，“tturbo”]; 这不仅可以解决问题，还可以减少在数组中拆分字符串的开销。 2.或者，如果要将其保留在字符串中，请将var team声明行更改为以下内容： var team = teamsbyname.split（'，'）; 即在逗号后添加一个空格。

建议您遵循第一种方法，不仅要解决问题，还要提高开销，并消除未来出现问题的可能性。无论何时您想要显示团队名称，您都可以使用Array.join()功能。

干杯！

更新js函数中的html div值for循环

1 个答案: