Question

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

未捕获的TypeError：无法在index.html上读取null的属性'append'：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>

为什么我收到此错误以及如何解决？

Answer 1

你的javascript代码甚至在加载html之前就会执行，因为它无法找到＆＃39; resultList＆＃39;元件。

将以下代码包含在某个功能中。

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

您需要为resultList声明一个变量;它还没有定义。

var resultList = document.getElementById('resultList');

请确保该行位于有问题的追加代码之上。

Javascript Uncaught TypeError：无法在代码中读取null的属性'append'

3 个答案: