Cant get javascript DOM selectors to work
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element">Why does jQuery or a DOM method such as `getElementById` not find the element?</a>  </p>
</blockquote>



<p>I've been trying to learn js, but im having trouble getting a very simple example to work and i cant seem to find what im doing wrong. From all i understand the below example should work. When i click on the second button, it calls the function f2 and outputs "batman" as an alert, so i know the javascript page is linked correctly. But when i click on the first button nothing happens.</p>

<p>HTML:</p>

<pre><code>&lt;head&gt;
&lt;script type="text/javascript" src="Positioning and flow tests.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;p id="par1"&gt;Test&lt;/p&gt;

&lt;button onclick="f1()"&gt;Click me for par 1 content&lt;/button&gt;

&lt;button onclick="f2()"&gt;Click me for predefined text&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Javascript</p>

<pre><code>// JavaScript Document

var var1 = document.getElementById("par1");

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
alert("batman");
}
</code></pre>
