I have this html page with a javascript function on it. It is not returning anything on the page but I am getting this on the console:
Uncaught TypeError: Cannot read property 'append' of null at index.html:82
Here is the full page code:
<!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>
Why I'm I getting this error and how can I fix it?
I have this html page with a javascript function on it. It is not returning anything on the page but I am getting this on the console:
Uncaught TypeError: Cannot read property 'append' of null at index.html:82
Here is the full page code:
<!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>
Why I'm I getting this error and how can I fix it?
Share Improve this question asked Mar 29, 2017 at 18:58 user7780275user7780275 1- 1 Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? – Sebastian Simon Commented Mar 29, 2017 at 18:59
4 Answers
Reset to default 6Your javascript code executes even before the html is loaded, due to which it is unable to locate 'resultList' element.
Wrap your below code in some function.
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 + ', ');
}
}
}
Now call this function through onload() event which will be executed only when whole page is loaded.
<body onload="foo()">
<div id="resultList"></div>
</body>
The script begins executing before the DOM is fully loaded, so the call to document.getElementById('resultList'); returns null.
One way to fix, move your <script> tag to appear after the <body> element
Another way, wrap your code in a call to document.addEventListener:
document.addEventListener("DOMContentLoaded", function(event) {
// copy code here
});
Or use jQuery:
$(document).ready(function(event) {
// copy code here
});
Wrap your for loop in some function and call that function in load event,
or else try to add your scrpit a defer coz it helps JS code is executing before the HTML.
You need to declare a variable for resultList; it is not yet defined.
var resultList = document.getElementById('resultList');
Just make sure that line is above the offending append code.