0

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

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

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

如果我声明他们的 getElementById 并发出警告，它告诉我我的函数中确实有它们可用。如果我然后弹出一个警报以确保我的团队和持续时间值匹配，它会返回我所期望的：为每个团队匹配不同的持续时间。

如果我然后尝试将其写入命名的 div，我会在浏览器控制台中不断收到以下错误。

'未捕获的类型错误：无法读取 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>
4

1 回答 1

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()功能。

干杯!

于 2013-07-02T09:39:23.433 回答