CODEWITHSUNDEEP
javascript
user7780275
user7780275

Reputation:

Javascript Uncaught TypeError: Cannot read property 'append' of null in code

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?

Upvotes: 3

Views: 39888

Answers (4)

pradeep
pradeep

Reputation: 11

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.

Upvotes: 0

Jaspreet Singh
Jaspreet Singh

Reputation: 1762

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

Upvotes: 6

ryan
ryan

Reputation: 1463

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
});

Upvotes: 3

Rob Brander
Rob Brander

Reputation: 3781

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.

Upvotes: -1

Related Questions