Question

Javascript 未捕获的类型错误：无法读取代码中 null 的属性“append”

2017-03-29

38803

javascript

我有这个带有 javascript 函数的 html 页面。它没有在页面上返回任何内容，但我在控制台上得到了这个：

未捕获的 TypeError：无法读取 index.html:82 处 null 的属性“append”

以下是完整的页面代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

    <script>

function checkDistance(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

var fixedlat = 51.714236;
var fixedlon = 50.710236;
var miles = 20;
var distanceLimit = miles * 1.6; //(km)
var data = [
  {
    "name": "Paul Brooks",
    "location": {
      "lat": 51.714236,
      "lon": 50.710236
    }
  },
  {
    "name": "Jason Orange",
    "location": {
      "lat": 52.030778298795856,
      "lon": 0.364888567109396
    }
  },
  {
    "name": "Mark Way",
    "location": {
      "lat": 53.41899784623413,
      "lon": -1.9138465628943413
    }
  },
  {
    "name": "Ben Bon",
    "location": {
      "lat": 52.30976192959104,
      "lon": -0.4014670363034498
    }
  },
  {
    "name": "Chris Col",
    "location": {
      "lat": 53.45301856182801,
      "lon": -1.8765834388107732
    }
  },
  {
    "name": "Von Van",
    "location": {
      "lat": 53.82771812914788,
      "lon": -0.7563793003592991
    }
  }
];

for(var i = 0;i < data.length;i++){ 

    var result = checkDistance(fixedlat,fixedlon,data[i].location.lat,data[i].location.lon);

    if(result <= distanceLimit){
        var resultList = document.getElementById('resultList');
        resultList.append(data[i].name + ', ');
    }
}



    </script>


</head>
<body>

   <div id="resultList"></div>

</body>
</html>

为什么我会收到此错误以及如何修复它？

Answer 1

您的 javascript 代码在 html 加载之前就执行了，因此无法找到“resultList”元素。

将以下代码包装在某个函数中。

function foo(){
    for(var i = 0;i < data.length;i++){ 
        var result = checkDistance(fixedlat,fixedlon,data[i].location.lat,data[i].location.lon);
        if(result <= distanceLimit){
            var resultList = document.getElementById('resultList');
            resultList.append(data[i].name + ', ');
        }
    }
}

现在通过 onload() 事件调用此函数，该事件仅在整个页面加载完成后执行。

<body onload="foo()">
   <div id="resultList"></div>
</body>

Answer 2

脚本在 DOM 完全加载之前开始执行，因此对 document.getElementById('resultList'); 的调用将返回 null。

一种解决方法是，将 <script> 标签移至 <body> 元素之后

另一种方法是，将代码包装在对 document.addEventListener 的调用中：

document.addEventListener("DOMContentLoaded", function(event) {     
   // copy code here
});

或者使用 jQuery：

$(document).ready(function(event) {     
   // copy code here
});

Answer 3

将您的 for 循环包装在某个函数中，并在 load 事件中调用该函数，

或者尝试为您的脚本添加一个延迟因为它有助于 JS 代码在 HTML 之前执行。