onclick multiple event handling for external javascript
<p>The problem:
making a very simple style switcher with js (without inline event handling). This is probably easy to do. I've confused myself with handling multiple onclick events however and just proped everything up with inline. Anyone know how to handle multiple onclick events?</p>

<p>The Html:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
&lt;head&gt;&lt;title&gt;page 2&lt;/title&gt;
&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;

&lt;link rel="stylesheet" id="style" type="text/css" href="style.css" /&gt;
&lt;script type="text/javascript" src="switcher.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;page 2&lt;/h1&gt;
&lt;hr/&gt;
&lt;div id="nav"&gt;
&lt;ul id="pages"&gt;
&lt;li&gt;&lt;a href="#" id="style1" onclick="style_one()" &gt;Style 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" id="style2" onclick="style_two()"&gt;Style 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" id="style3"  onclick="style_three()" &gt;Style 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="page3.htm"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="logout"&gt;
&lt;li&gt;&lt;a href="login.htm"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;hr/&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The external JS so far</p>

<pre><code>function style_one()
{
document.getElementById("style").href="style1.css";
}

function style_two()
{
document.getElementById("style").href="style2.css";
}

function style_three()
{
document.getElementById("style").href="style3.css";
}
</code></pre>
