Hi I am trying to load content and dump json on page:
**index.html**

```
<html>
  <head>
  <title>Learning</title>
  <style type="text/css">
  body { background-color: #ddd; }
  #container { height: 100%; width: 100%; display: table; }
  #inner { vertical-align: middle; display: table-cell; }
  #gauge_div { width: 120px; margin: 0 auto; }
</style>
  </head>
  <body id="body">
    <script src="main.js"></script>
    <div id="animal-info"></div>
  </body>
</html>

```

**main.js**

```
var animalContainer = document.getElementById("animal-info");

var ourRequeast = new XMLHttpRequest();
var loaded = document.getElementById("body");

body.addEventListener("onload", function(){

ourRequeast.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequeast.onload = function() {
// console.log(ourRequeast.responseText);
// var ourData = ourRequeast.responseText;
var ourData = JSON.parse(ourRequeast.responseText);
// console.log(ourData[0])

renderHTML(ourData);
}
ourRequeast.send();
});

function renderHTML(data){
    animalContainer.insertAdjacentHTML('beforeend', 'testing 123');
}

```

so I am hoping that it should print **"testing 123"** on page load but its neither giving error nor showing anything