title: How to Make Alert(); Show After Page is Fully Loaded?
body: <p><strong>My Background:</strong> I am new to Javascript. I have used a bit of Jquery before, but I am trying to learn pure vanilla Javascript without using a library.</p>
  
  <p><strong>My Software:</strong> I am using the latest Brackets text editor along with the latest version of Safari.</p>
  
  <p><strong>The Problem:</strong> I am trying to show an <code>alert();</code> after the page is fully loaded and displayed. The alert always runs before the page is displayed. The page displays only after I close the alert.</p>
  
  <p><strong>My Research:</strong> I have tried many different solutions, almost none of them seem to work; however, when a solution DOES work, some of my other Javascript statements stop working. I have tried the following solutions:</p>
  
  <ul>
  <li><p>Putting my script tags at the bottom of the page</p>
  
  <pre><code>&lt;body&gt;
  &lt;!--Body content--&gt;
  &lt;script src="javascript.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre></li>
  <li><p>Creating an unload event in my .js file</p>
  
  <pre><code>window.onload = function(){
      alert("My alert!");
  }
  </code></pre></li>
  <li><p>Creating a <code>readystatechange</code> event and checking the current document.readystate in my .js file</p>
  
  <pre><code>document.onreadystatechange = function(){
      if(document.readyState=='loaded' || document.readyState=='complete')
          alert("My alert!");
  }
  </code></pre></li>
  <li><p>I've even tried methods not involving my .js file such as</p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
      function myFunction(){
          alert("My alert!");
      }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="myFunction()"&gt;
  &lt;!--Body content--&gt;
  &lt;/body&gt;
  </code></pre></li>
  </ul>
  
  <p><strong>Closest Answer:</strong> The only thing close to working is putting the <code>async</code> attribute in my script tag like...</p>
  
  <pre><code>&lt;script src="Javascript-101.js" async&gt;&lt;/script&gt;
  </code></pre>
  
  <p>However, a few weird things happen when I do this:</p>
  
  <ul>
  <li>When I include the <code>async</code> attribute, it works! The <code>alert();</code> is shown after the page is displayed... BUT my <code>document.write();</code> statements stop working, regardless of whether I put my script in the head of my HTML document or before the closing <code>&lt;/body&gt;</code> tag.</li>
  <li>When I exclude the <code>async</code> statement with my script located in the head of my HTML document, it does not work... the <code>alert();</code> is shown before the page is displayed. Additionally, it makes my <code>Math.sqrt(64);</code> statement stop working. However, my <code>document.write();</code> statements work just fine.</li>
  <li>When I exclude the <code>async</code> statement with my script located before the closing <code>&lt;/body&gt;</code> tag, it does not work... the <code>alert();</code> is shown before the page is displayed. All of my other statements work just fine in this scenario.</li>
  </ul>
  
  <p><strong>My HTML Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="Javascript-101.css"&gt;
      &lt;title&gt;Intro to Javascript&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;Javascript has front-end and server-side applications.&lt;/h1&gt;
      &lt;/div&gt;
      &lt;p id="math-answer"&gt;&lt;/p&gt;
      &lt;script src="Javascript-101.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My Javascript:</strong></p>
  
  <pre><code>/*jslint devel: true, evil: true*/
  var message = "Welcome to my website!";
  alert(message);
  document.write("&lt;h2&gt;Text #2 goes here.&lt;/h2&gt;");
  document.write("&lt;p&gt;Text #3 goes here.&lt;/p&gt;");
  console.log("Hello, console!");
  document.getElementById("math-answer").innerHTML = Math.sqrt(64);
  </code></pre>