I keep encountering the same error repeatedly... Can someone please explain what's going wrong here and provide a hint?
Error
script.js:20 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
at renderHTML (script.js:20)
at XMLHttpRequest.ourRequest.onload (script.js:13)
Javascript
var animalContainer=_('animal-info');
function _(id){
return document.getElementById(id);
}
_('btn').addEventListener("click",function(){
var ourRequest=new XMLHttpRequest();
ourRequest.open('GET','test.json');
ourRequest.onload=function(){
var ourData=JSON.parse(ourRequest.responseText);
renderHTML(ourData);
console.log(ourData[0]);
};
ourRequest.send();
});
function renderHTML(data){
animalContainer.insertAdjacentHTML('beforeend','testing 123');
}
index.php
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id ="btn">Submit</button>
<script type="text/javascript" src="script.js"></script>
<div id="animal-info"></div>
</body>
</html>