问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Javascript Uncaught TypeError：无法在代码中读取 null 的属性“追加”

社区维基
1
新手上路，请多包涵

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

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

这是完整的页面代码：

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

为什么我会收到此错误，我该如何解决？

原文由 user7780275 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascript
阅读 266
2 个回答
得票最新
社区维基
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>

原文由 Jaspreet Singh 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

该脚本在 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
});

原文由 ryan 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题