title: Changing HTML using javascript dynamically as the page first loads
body: <p>I am making a dynamic page that contains several divs that change when the user selects to go to the next passage on my page. However, I cannot get my website to load the first set of information. 
  The HTML contains these blank divs, and then my function loads in a JSON file and changes the divs by their ID's. When I first load my page, these divs appear without text. Could it be that my javascript is not running when the page is first loaded?  Here is an example of my HTML:</p>
  
  <pre><code>&lt;div id="passage-section"&gt;
  &lt;!-- Title --&gt;
  &lt;div id="passage-title"&gt;&lt;/div&gt;
  &lt;!-- The panel that will display the content --&gt;
  &lt;div id="passage"&gt;&lt;/div&gt;
  &lt;!-- Button that when clicked activates a dialog box for the passage. --&gt;
  &lt;button id="max-passage" class="max"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my function:</p>
  
  <pre><code>//This section of code handles the calling of the first passage.  
  //Loading in the JSON file and changing the contents of the page.
  function loadFirstPassage()
  {
      var timeout = 250;
      //load the new JSON file and change the elements
      $.getJSON("passages/2.1.1.json", function( data ) {
          document.getElementById("passage-title").innerHTML = data["passageNumber"];
          document.getElementById("passage").innerHTML = "&lt;p class='serif'&gt;".concat(data["reading"]).concat('&lt;/p&gt;');\
  
          //fading the elements back in
          $("#passage-title").fadeIn(timeout);
          $("#passage").fadeIn(timeout);
     });
  }
  </code></pre>
  
  <p>I tried calling this function in the body and that did not work, so currently it is getting called in the head.</p>
  
  <pre><code>&lt;head&gt;  
  &lt;!--The orginal load of the page   maybe it works, who knows? --&gt;
  &lt;script&gt;
  $(window).load(function()
  {
    loadFirstPassage();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>