Want to make an empty <div> element clickable via JavaScript (no jQuery)
<p>I am trying to make two empty <code>&lt;div&gt;</code> elements clickable through the use of HTML and Javascript alone. No jQuery.
I have this HTML document...</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;title&gt;whatever&lt;/title&gt;
   &lt;link rel="stylesheet" href="css_squares" media="screen" &gt;
   &lt;script src="lala.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
   &lt;h1&gt;Clickable Squares&lt;/h1&gt;

   &lt;div id="top_square" onclick="alert('Top square clicked')"&gt;
   &lt;/div&gt;

   &lt;div id="bottom_square"&gt;
   &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>and also have this simple CSS...</p>

<pre><code>#top_square {
width: 50px;
height: 50px;
background-color: #01FF55;  
}

#bottom_square {
width: 150px;
height: 150px;
background-color: #AB877F;
}
</code></pre>

<p>I want to make both squares create an alert box when clicked. The top square already achieves this through the HTML code, but I am unable to get the bottom
square to create a similar alert through Javascript code.
This is what I have tried...</p>

<pre><code>window.onload = init;
function init() {
   alert("you have successfully loaded an external .js file.");
   // this is just to check that lala.js is loading.

   var bottom_sqr = getElementById("bottom_square");
                   // I also tried calling 'document.getElementById'...

   bottom_sqr.onclick = handle_bottom_click;

   function handle_bottom_click() {
      alert('Bottom square clicked');
   }
</code></pre>

<p>This is not working at all... hence the post obviously.
Any help would be greatly appreciated.</p>