title: Trouble running AJAX
body: <p>I'm doing homework and must use javascript object and array in my ajax. I'm sure there is something wrong in the code, but as I have very limited knowledge I just can't find it. I'm just currently learning this and a few bits and pieces were followed through examples I could find online.</p>
  
  <p>XML</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8" ?&gt; 
  &lt;onlineOrder month="03/2015"&gt;
    &lt;product&gt;
      &lt;code&gt;CRA01&lt;/code&gt;
      &lt;unitPrice&gt;10.50&lt;/unitPrice&gt;
      &lt;lastMonth&gt;101&lt;/lastMonth&gt;
      &lt;thisMonth&gt;120&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;CRA02&lt;/code&gt;
      &lt;unitPrice&gt;21.30&lt;/unitPrice&gt;
      &lt;lastMonth&gt;50&lt;/lastMonth&gt;
      &lt;thisMonth&gt;43&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;HOB11&lt;/code&gt;
      &lt;unitPrice&gt;8.50&lt;/unitPrice&gt;
      &lt;lastMonth&gt;201&lt;/lastMonth&gt;
      &lt;thisMonth&gt;312&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;HOB13&lt;/code&gt;
      &lt;unitPrice&gt;43.50&lt;/unitPrice&gt;
      &lt;lastMonth&gt;20&lt;/lastMonth&gt;
      &lt;thisMonth&gt;21&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;JEW21&lt;/code&gt;
      &lt;unitPrice&gt;200.00&lt;/unitPrice&gt;
      &lt;lastMonth&gt;7&lt;/lastMonth&gt;
      &lt;thisMonth&gt;11&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;JEW22&lt;/code&gt;
      &lt;unitPrice&gt;450.00&lt;/unitPrice&gt;
      &lt;lastMonth&gt;10&lt;/lastMonth&gt;
      &lt;thisMonth&gt;4&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;GAM41&lt;/code&gt;
      &lt;unitPrice&gt;20.30&lt;/unitPrice&gt;
      &lt;lastMonth&gt;420&lt;/lastMonth&gt;
      &lt;thisMonth&gt;450&lt;/thisMonth&gt; 
    &lt;/product&gt;
    &lt;product&gt;
      &lt;code&gt;GAM42&lt;/code&gt;
      &lt;unitPrice&gt;45.50&lt;/unitPrice&gt;
      &lt;lastMonth&gt;361&lt;/lastMonth&gt;
      &lt;thisMonth&gt;180&lt;/thisMonth&gt; 
    &lt;/product&gt;
  &lt;/onlineOrder&gt;
  </code></pre>
  
  <p>HTML - The part with the table is something I can work out pretty easily myself. The problem is that I am only displaying the button, and when pressed it is not displaying anything. I do not use jQuery and never have, so sorry if this is a pain to deal with.
      
       
         </p>
  
  <pre><code>  &lt;script&gt;
      function getOnlineOrderAjax() {
        var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
          if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
              processResult(xhttp);
          }
        };
  
      xhttp.open("GET", "A8.xml", true);
      xhttp.send();
      }
  
  
      function processResult(xhttp) {
        var xml = xhttp.responseXML;
        var onlineOrderObj = parseXML(xml);
  
      console.log(onlineOrderObj);
      display(onlineOrderObj);
      }
  
  
      function parseXML(xml) {
        var onlineOrderObj = {}; //hold information
        var onlineOrderElement = xml.getElementsByTagName("onlineOrder")[0];
            onlineOrderObj.month = onlineOrderElement.getAttribute("month");
            onlineOrderObj.productList = []; //create array
  
        var productElements = onlineOrderElement.getElementsByTagName("product"); 
          for(var i = 0; i &lt; productElements.length; i++) {
              var product = {}; //create index object
  
                  product.code = productElements[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
                  product.unitPrice = Number(indexElements[i].getElementsByTagName("unitPrice")[0].childNodes[0].nodeValue);
                  product.lastMonth = Number(indexElements[i].getElementsByTagName("lastMonth")[0].childNodes[0].nodeValue);
                  product.thisMonth = Number(indexElements[i].getElementsByTagName("thisMonth")[0].childNodes[0].nodeValue);
  
              onlineOrderObj.productList.push(product); //object into array
          }
        return onlineOrderObj;
      }
  
  
      function display(onlineOrderObj){
          var change = 0;
  
          var html = "&lt;h1&gt;Online order statistics for " + onlineOrderObj.month + "&lt;/h1&gt;";
              html += "&lt;table border='1'&gt;";
              html += "&lt;tr&gt;&lt;th&gt;Code&lt;/th&gt;&lt;th&gt;Unit Price&lt;/th&gt;&lt;th&gt;Last Month &lt;/th&gt;&lt;th&gt;This Month&lt;/th&gt;&lt;/tr&gt;";
          for(var i=0; i &lt; onlineOrderObj.productList.length; i++) { 
              html += "&lt;tr&gt;";
              html += "&lt;td align='center'&gt;&lt;b&gt;" + onlineOrderObj.productList[i].code + "&lt;/b&gt;&lt;/td&gt;";
              html += "&lt;td align='right'&gt;" + onlineOrderObj.productList[i].unitPrice + "&lt;/td&gt;"; 
              html += "&lt;td align='right'&gt;" + onlineOrderObj.productList[i].lastMonth + "&lt;/td&gt;";
              html += "&lt;td align='right'&gt;" + onlineOrderObj.productList[i].thisMonth + "&lt;/td&gt;";   
              html += "&lt;/tr&gt;"; 
          }
          html += "&lt;/table&gt;"; 
  
          var onlineOrderDiv = document.getElementById("onlineOrderDiv");
              onlineOrderDiv.innerHTML = html;
      }
     &lt;/script&gt;
  &lt;/head&gt;
   &lt;body&gt;
     &lt;button onClick="getOnlineOrderAjax()"&gt;
     Click here to view online order statistics
     &lt;/button&gt;
     &lt;br /&gt;&lt;br /&gt;
     &lt;div id="onlineOrderDiv" /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>