Javascript not executing procedures correctly
<p>I'm trying to use JavaScript to manipulate page content in a dummy webpage I'm building.</p>

<p>To that end, I wrote a little function called <code>writeText(file_name, location)</code> that gets a HTML file specified by the file name, and prints the content of that file to the <code>innerHTML</code> of a pair of <code>&lt;div&gt;</code> tags whose id attribute correspond to the <code>location</code> field.</p>

<p>I then wrapped the calls in other functions to automate building full pages like this.</p>

<p>So I call something that looks like this:</p>

<pre><code>function displayHome() {
    writeText('homeMain.html', 'mainFrame');
    writeText('homeSide.html', 'sideFrame');
}
</code></pre>

<p>...to display the home page.</p>

<p>However, when I call this function, the display only updates the <code>'sideFrame'</code> object and doesn't make any changes to the content of <code>'mainFrame'</code>. But if I interrupt the function with an alert("Dummy") between the two <code>writeText()</code> calls, then both of the contentFrames update correctly.</p>

<p>I was wondering if anyone has seen anything like this before, and if anyone knows how to fix it.</p>

<p>For completeness' sake (this was copied nearly verbatim from the w3schools website):</p>

<pre><code>function writeText(script_file, location) {
    if (window.XMLHttpRequest)  {
        xmlhttp = new XMLHttpRequest();
    }   else    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        document.getElementById(location).innerHTML = xmlhttp.responseText;
    }
xmlhttp.open("GET",script_file,true);
xmlhttp.send();
}
</code></pre>
