Javascript未捕获类型错误：无法读取属性'；追加'；代码中的空值_Javascript

Javascript未捕获类型错误：无法读取属性'；追加'；代码中的空值

javascript

Javascript未捕获类型错误：无法读取属性'；追加'；代码中的空值,javascript,Javascript,我有一个带有javascript函数的html页面。它不会在页面上返回任何内容，但我会在控制台上看到：未捕获类型错误：无法读取索引处null的属性“append”。html:82 以下是整页代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function checkDist

我有一个带有javascript函数的html页面。它不会在页面上返回任何内容，但我会在控制台上看到：

未捕获类型错误：无法读取索引处null的属性“append”。html:82

以下是整页代码：

<!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>


功能检查距离（lat1、lon1、lat2、lon2）{
var R=6371；//地球半径，单位为km
var dLat=deg2rad（lat2-lat1）；//下面是deg2rad
var-dLon=deg2rad（lon2-lon1）；
变量a=
数学单（dLat/2）*数学单（dLat/2）+
数学cos（deg2rad（lat1））*数学cos（deg2rad（lat2））*
数学单（dLon/2）*数学单（dLon/2）
; 
var c=2*Math.atan2（Math.sqrt（a），Math.sqrt（1-a））；
var d=R*c；//以公里为单位的距离
返回d；
}
功能deg2rad（度）{
返回度*（数学PI/180）
}
var fixedlat=51.714236；
var fixedlon=50.710236；
var miles=20；
var距离限制=英里*1.6//（公里）
风险值数据=[
{
“姓名”：“保罗·布鲁克斯”，
“地点”：{
“lat”：51.714236，
“lon”：50.710236
}
},
{
“姓名”：“Jason Orange”，
“地点”：{
“lat”：52.030778298795856，
“lon”：0.364888567109396
}
},
{
“名称”：“标记方式”，
“地点”：{
“lat”：53.41899784623413，
“lon”：-1.9138465628943413
}
},
{
“姓名”：“Ben Bon”，
“地点”：{
“lat”：52.30976192959104，
“lon”：-0.4014670363034498
}
},
{
“姓名”：“Chris Col”，
“地点”：{
“lat”：53.45301856182801，
“lon”：-1.8765834388107732
}
},
{
“姓名”：“Von Van”，
“地点”：{
“lat”：53.82771812914788，
“lon”：-0.7563793003592991
}
}
];
对于（var i=0；i如果（result您需要为resultList声明一个变量；它尚未定义
var resultList = document.getElementById('resultList');

只需确保行位于有问题的追加代码上方。
脚本在DOM完全加载之前开始执行，因此对document.getElementById（'resultList'）；
的调用返回null
一种修复方法是将
标记移动到
元素后面
另一种方法是，在调用文档时包装代码。addEventListener
：
document.addEventListener("DOMContentLoaded", function(event) {     
   // copy code here
});

或者使用jQuery：
$(document).ready(function(event) {     
   // copy code here
});

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 + ', ');
        }
    }
}

可能重复的
<body onload="foo()">
   <div id="resultList"></div>
</body>