title: XMLHttpRequest.onReadyStateChange not working in Chrome, Firefox, Internet Explorer
body: <p>I am using Aptana Studio 3 text editor and working on Windows 7 Enterprise OS. I have the following AJAX code which is not working on the local system to fetch JSON files kept on an https website. This example is taken from the Youtube video:</p>
  
  <p><a href="https://youtu.be/rJesac0_Ftw" rel="nofollow noreferrer">JSON and AJAX Tutorial: With Real Examples</a></p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="test" content="content"/&gt;
          &lt;title&gt;JSON and AJAX&lt;/title&gt;&lt;/head&gt;
  &lt;header&gt;
    &lt;h1&gt;JSON and AJAX&lt;/h1&gt;
    &lt;link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/&gt;
  &lt;/header&gt;
  
  
  &lt;body&gt;
   &lt;script src="main.js"&gt;&lt;/script&gt;
   &lt;button type="button" onclick="function()" id="btn"&gt;Fetch Info for 3 New Animals&lt;/button&gt;
   &lt;div id="animal-info"&gt; &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Styles.css:</strong></p>
  
  <pre><code>    html, body {
    padding: 0;
    margin: 0;
  }
  
  .hide-me {
    visibility: hidden;
    opacity: 0;
    transform: scale(.75);
  }
  
  h1 {
    margin-top: 0;
    font-size: 2.4em;
    font-weight: normal;
    display: inline-block;
  }
  
  body {
    font-family: Helvetica, sans-serif;
    padding: 50px 10%;
  }
  
  button {
    background-color: #046380;
    color: #FFF;
    border: none;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    box-shadow: 2px 2px 0 #034154;
    margin-bottom: 10px;
    margin-left: 18px;
    transition: opacity .4s ease-out, transform .4s ease-out, visibility .4s ease-out;
    position: relative;
    top: -10px;
  }
  
  button:hover {
    background-color: #034F66;
  }
  
  button:active {
    background-color: #034154;
    box-shadow: none;
    position: relative;
    top: -8px;
    left: 2px;
  }
  
  p {
    padding: 4px 0 2px 8px;
    line-height: 1.7;
    border-bottom: 1px dotted #DDD;
    list-style: none;
    margin: 0;
  }
  </code></pre>
  
  <p><strong>main.js:</strong></p>
  
  <pre><code>    var pageCounter = 1;
  var animalContainer = document.getElementById("animal-info");
  var btn = document.getElementById("btn");
  
  btn.addEventListener("onClick", function() {  
    var ourRequest = new XMLHttpRequest();
    ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
    //ourRequest.open('GET', 'animals-' + pageCounter + '.json');
    ourRequest.onload = function() {
      if (ourRequest.status &gt;= 200 &amp;&amp; ourRequest.status &lt; 400) {
        var ourData = JSON.parse(ourRequest.responseText);
        renderHTML(ourData);
      } else {
        console.log("We connected to the server, but it returned an error.");
      }
  
    };
  
    ourRequest.onerror = function() {
      console.log("Connection error");
    };
  
    ourRequest.send();
    pageCounter++;
    if (pageCounter &gt; 3) {
      btn.classList.add("hide-me");
    }
  }
  );
  
  
  function renderHTML(data) {
    var htmlString = "";
  
      for (i = 0; i &lt; data.length; i++) {
      htmlString += "&lt;p&gt;" + data[i].name + " is a " + data[i].species + " that likes to eat ";
  
      for (ii = 0; ii &lt; data[i].foods.likes.length; ii++) {
        if (ii == 0) {
          htmlString += data[i].foods.likes[ii];
        } else {
          htmlString += " and " + data[i].foods.likes[ii];
        }
      }
  
      htmlString += ' and dislikes ';
  
      for (ii = 0; ii &lt; data[i].foods.dislikes.length; ii++) {
        if (ii == 0) {
          htmlString += data[i].foods.dislikes[ii];
        } else {
          htmlString += " and " + data[i].foods.dislikes[ii];
        }
      }
  
      htmlString += '.&lt;/p&gt;';
  
    }
  
    animalContainer.insertAdjacentHTML('beforeend', htmlString);
  }
  </code></pre>
  
  <p>This code doesn't seem to work on my local machine. I tried running it by installing an http-server using <strong>NodeJs</strong> on my local machine, but still no joy!</p>
  
  <p>Another JSON AJAX code on <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax" rel="nofollow noreferrer">ww3Schools.com</a></p>
  
  <p>though seems to work fine. This is an inline javascript code in the html file. Initially i thought onReadyStateChange was the culprit not working on IE, FF, CH etc., but this website code also has onReadyStateChange but it works fine! </p>
  
  <p>Or is it the Button click event handler the cause why it is not working?</p>
  
  <pre><code>btn.addEventListener("onClick", function() {  
  </code></pre>
  
  <p>My code is not inline, could that be the reason? If not, what am i missing or doing wrong?</p>