Images and buttons not loading every time
<p>I am new to JavaScript.  I created the webpage linked below as an exercise for a class I am taking.</p>

<p><a href="http://www.matthoover.com/iw3htp5/ex16_08/catalog.html" rel="nofollow">JavaScript Product Catalog</a></p>

<p>It seems to work ok if it all loads correctly, but half the time either the images or buttons do not load, and sometimes the thumbnail loads but the full-size (mouseover) image does not load.  In Firefox or IE, it seems to only happen on first loads, and after that (as long as browser stays open), it will successfully load every time after that.  But in Chrome it continues to act random every single page reload.  Just refresh the page about 10 times in a row and you will probably see a couple instances where either the buttons or the images (or both) don't load.</p>

<p>I am assuming this is a problem with my code, since I've never had any other problems with the server.  Any ideas?</p>

<p>Thanks!</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;head&gt;
   &lt;meta charset = "utf-8"&gt;
   &lt;style type = "text/css"&gt;
      .box { border: 1px solid black; padding: 4px }
   &lt;/style&gt;
   &lt;title&gt;Product Catalog&lt;/title&gt;
   &lt;script&gt;

   var catalogDiv;
   var summaryRequest;
   var descriptionsRequest;
   var thumbsRequest;
   var imagesRequest;

   function showLargeImage( imageElement )
   {
       imageElement.style.display = "none";
       imageElement.nextSibling.style.display = "inline";
   }

   function showThumb( imageElement )
   {
       imageElement.style.display = "none";
       imageElement.previousSibling.style.display = "inline";
   }

   function showDesc( descButton )
   {
      if ( descButton.nextSibling.style.display == "none" ) {
         descButton.nextSibling.style.display = "block";
      } else {
         descButton.nextSibling.style.display = "none";
      }
   }

   function getDescriptions()
   {
      try
      {
         descriptionsRequest = new XMLHttpRequest();
         descriptionsRequest.addEventListener("readystatechange",
            loadDescriptions, false );
         descriptionsRequest.open( "GET", "descriptions.json", true );
         descriptionsRequest.setRequestHeader( "Accept",
            "application/json; charset=utf-8" );
         descriptionsRequest.send();
      }
      catch ( exception )
      {
         alert( "Request Failed" );
      }
   }

   function loadDescriptions()
   {
      if ( descriptionsRequest.readyState == 4
         &amp;&amp; descriptionsRequest.status == 200 )
      {
         var descriptions = JSON.parse( descriptionsRequest.responseText );
         for ( var i = 0; i &lt; descriptions.length; i++ ) {
            var infoDiv = document.getElementById( descriptions[i].id +
               "-info-inner" );

            var descButton = document.createElement( "button" );
            infoDiv.appendChild( descButton );
            descButton.type = "button";
            descButton.textContent = "show description";
            descButton.setAttribute( "onclick", "showDesc( this )");

            var desc = document.createElement( "fieldset" );
            desc.style.display = "none";
            desc.style.margin = "10px";
            infoDiv.appendChild( desc );
            desc.innerHTML = "&lt;br&gt;" + descriptions[i].text + "&lt;br&gt;&lt;br&gt;" ;
         }
      }
   }

   function getImages()
   {
      try
      {
         imagesRequest = new XMLHttpRequest();
         imagesRequest.addEventListener("readystatechange",
            loadImages, false );
         imagesRequest.open( "GET", "images.json", true );
         imagesRequest.setRequestHeader( "Accept",
            "application/json; charset=utf-8" );
         imagesRequest.send();
      }
      catch ( exception )
      {
         alert( "Request Failed" );
      }
   }

   function loadImages()
   {
      if ( imagesRequest.readyState == 4 &amp;&amp; imagesRequest.status == 200 )
      {
         var images = JSON.parse( imagesRequest.responseText );
         for ( var i = 0; i &lt; images.length; i++ ) {
            var imageDiv = document.getElementById( images[i].id +
               "-image-inner" );
            imageDiv.innerHTML += "&lt;img style=\"display:none;\"" +
               "src=\"" + images[i].filename+ "\"&gt;";
            imageDiv.lastChild.setAttribute( "onmouseout",
               "showThumb( this )" );
         }
      }
   }   

   function getThumbs()
   {
      try
      {
         thumbsRequest = new XMLHttpRequest();
         thumbsRequest.addEventListener("readystatechange",
            loadThumbs, false );
         thumbsRequest.open( "GET", "thumbs.json", true );
         thumbsRequest.setRequestHeader( "Accept",
            "application/json; charset=utf-8" );
         thumbsRequest.send();
      }
      catch ( exception )
      {
         alert( "Request Failed" );
      }
   }

   function loadThumbs()
   {
      if ( thumbsRequest.readyState == 4 &amp;&amp; thumbsRequest.status == 200 )
      {
         var thumbs = JSON.parse( thumbsRequest.responseText );
         for ( var i = 0; i &lt; thumbs.length; i++ ) {
            var imageDiv = document.getElementById( thumbs[i].id +
               "-image-inner" );
            imageDiv.innerHTML = "&lt;img style=\"display:inline;\"" +
               "src=\"" + thumbs[i].filename+ "\"&gt;";
            imageDiv.firstChild.setAttribute( "onmouseover",
               "showLargeImage( this )");
         }
      }
   }   

   function setupDivsRequest()
   {
      try
      {
         summaryRequest = new XMLHttpRequest();
         summaryRequest.addEventListener("readystatechange",
            setupDivsResponse, false );
         summaryRequest.open( "GET", "summary.json", true );
         summaryRequest.setRequestHeader( "Accept",
            "application/json; charset=utf-8" );
         summaryRequest.send();
      }
      catch ( exception )
      {
         alert( "Request Failed" );
      }
   }

   function setupDivsResponse()
   {
      if ( summaryRequest.readyState == 4 &amp;&amp; summaryRequest.status == 200 )
      {
         var summary = JSON.parse( summaryRequest.responseText );

         for ( var i = 0; i &lt; summary.length; i++ ) {

            var productDiv = document.createElement( "div" );
            var productImageOuterDiv = document.createElement( "div" );
            var productImageInnerDiv = document.createElement( "div" );
            var productInfoOuterDiv = document.createElement( "div" );
            var productInfoInnerDiv = document.createElement( "div" );

            catalogDiv.appendChild(productDiv);
            productDiv.appendChild( productImageOuterDiv );
            productDiv.appendChild( productInfoOuterDiv );
            productImageOuterDiv.appendChild( productImageInnerDiv );
            productInfoOuterDiv.appendChild( productInfoInnerDiv );

            productDiv.id = summary[i].id;
            productDiv.className = "box";

            productImageOuterDiv.id = summary[i].id + "-image-outer";
            productImageOuterDiv.style.cssFloat = "left";

            productImageInnerDiv.id = summary[i].id + "-image-inner";
            productImageInnerDiv.style.height = "250px";
            productImageInnerDiv.style.width = "250px";
            productImageInnerDiv.style.display = "table-cell";
            productImageInnerDiv.style.verticalAlign = "middle";
            productImageInnerDiv.style.textAlign = "center";

            productInfoOuterDiv.id = summary[i].id + "-info-outer";
            productInfoOuterDiv.style.height = "250px";

            productInfoInnerDiv.id = summary[i].id + "-info-inner";
            productInfoInnerDiv.style.float = "left";
            productInfoInnerDiv.style.padding = "10px";

            productInfoInnerDiv.innerHTML = summary[i].title + "&lt;br&gt;";
            productInfoInnerDiv.innerHTML += summary[i].price + "&lt;br&gt;&lt;br&gt;";
         }
      }
   }   

   function start()
   {
      catalogDiv = document.getElementById( "catalog" );
      setupDivsRequest();
      getThumbs();
      getImages();
      getDescriptions();
   }

   window.addEventListener( "load", start, false );
   &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1&gt;Mouse over a product thumbnail for a larger picture.&lt;/h1&gt;
   &lt;div id = "catalog"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
