Javascript getElementById null error
<p>I posted quite recently about an issue with javascript in firefox, and it was denoted the problem was likely document.write() overwriting the script somehow. <a href="http://stackoverflow.com/a/12028845/1433767">It was suggested I use IDs to solve the problem of both overwriting the script and to avoid stacking of the information</a>.</p>

<p>However, on trying to implement the IDs into my javascript and html code, I found that firebug reports that:</p>

<pre><code>"TypeError: document.getElementById("author_container") is null"
</code></pre>

<p>Despite the fact, that, once again, the ID is already defined under:</p>

<pre><code>&lt;p id="author_container"&gt;&lt;/p&gt;
</code></pre>

<p>And there are clearly no typos, <strong>and re-arranging the script</strong> into the head section or altering it so the p occurs before the script <strong>makes absolutely no difference</strong>. (Note the other example runs fine despite the script occurring first).</p>

<p>If I use a pre-existing example of an ID and getElementById and run it in firefox, it runs fine:</p>

<p><a href="http://pastebin.com/FTEX1HGE" rel="nofollow">http://pastebin.com/FTEX1HGE</a></p>

<p>But if I try to run my code, which doesn't seem that majorly different, I run into issues:
<a href="http://pastebin.com/XfGUpZAS" rel="nofollow">http://pastebin.com/XfGUpZAS</a></p>

<p>Am I missing something here? How do I alter the code to make it work in firefox? Will firefox allow me to ever run my code correctly? (Find out next week?)</p>
