Making javascript not inline and as a script

Hello guys,

           I was using [Adobe Spry, specifically the [URL="http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm"]adobe spry tabbed panels](http://labs.adobe.com/technologies/spry/), 

and in my example, I have used inline js to open the different panels, or simulate switching out the content without a new page load. In lines: 15 - 20.
I was wondering if someone could help me turn the inline javascript into a separate script that I can attach as a script. Or at remove the inline js as i believe using inline js in unprofessional.

I would appreciate any help.

Thanks in Advance & Best Regards,
Team 1504

Simply move everything between the <script> and </script> tags into a separate file.

Then simply add a src attribute to the script tag that points to that file.

You can put all your javascript into a separate file and then call the file in your html head section.

<script type="text/javascript" src="./lib/myScripts.js" ></script>

I just realised that I forgot to link my file. I am sure that it would help.
I understand how to turn JavaScript in <script> tags into a separate .js file and link it in the head, but this is using an onclick inline function and I do not know how to approach turning that into a separate file.

Here is file online and the specific area I need to make a seperate script, because it is inline is here:

<li class="TabbedPanelsTab" id="TabbedPanelsTab" href="#" onclick="TabbedPanels1.showPanel(0); return false;">1st Tab</li> 
        <li class="TabbedPanelsTab" id="TabbedPanelsTab" href="#" onclick="TabbedPanels1.showPanel(1); return false;">2nd Tab</li> 
        <li class="TabbedPanelsTab" id="TabbedPanelsTab" href="#" onclick="TabbedPanels1.showPanel(2); return false;">3rd Tab</li> 
        <li class="TabbedPanelsTab" id="TabbedPanelsTab" href="#" onclick="TabbedPanels1.showPanel(3); return false;">4th Tab</li> 
        <li class="TabbedPanelsTab" id="TabbedPanelsTab" href="#" onclick="TabbedPanels1.showPanel(4); return false;">5th Tab</li>  

I hope you guys can help with this.

Regards,
Team 1504

That code is invalid because you are using the same id more than once and ids are required to be unique.

If you make each id unique then you can replace the onclick= with JavaScript that uses document.getElementById wiith the unique id to attach an onclick = to each.