To load an external script, use this tag:

<script src="tabstrip.js"></script>

I already tried that. I tried putting the script in script tags in the head of the document. I tried using the link tag to link the external js file. None of them work. I used the web developer tool in Firefox and according to it the script (when in script tags in the head) gets executed when the page loads and then never executes again. It is never executed when used as an external js file regardless of which method I use, link or script src=.

I tried again using the script src= method. This time I put the js file in the same folder as the html file. When I loaded the page while using the web developer tool it did the same thing as having the script in script tags in the head of the document. It executed once when the page loaded and never executed again.

Again, I don't know why this script works in stackoverflow's sandbox and in jsfiddle, and doesn't work on my site.

The same code in jsfiddle

I already tried that.

It's not in the tabstrip.htm page you linked to earlier. Are you sure you uploaded it?

Wayne said

I already tried that.

It's not in the tabstrip.htm page you linked to earlier. Are you sure you uploaded it?

I have been working on it offline and online. My latest attempt using the external js file in the same folder as the html file was just offline. Give me a second and I will upload that change to the website.

OK, it's done. The iframe version now shows the external js file being used in the statement <script src='tabstrip.js'></script> and the js file is in the same folder as the html file.

For good measure I went ahead and updated the tabstrip.htm file so it also is using the <script src='tabstrip.js'></script> statement, and the js file is in the same folder as the htm file.

I suggest moving the script tag at the end of the body (just before the &lt/body> tag). The reason to position it there is that you need the script to run AFTER the table has been added to the document. Otherwise, when your script gathers a list of all the .td1 cells into the tabs list, the list ends up being empty. No list, event handlers attached.

(If you right-click > Select All and then right-click > View Selection Source in JSFiddle, you'll find the script after the table.)

If you strongly prefer to keep your script tag in the head section, you could try adding the defer attribute:

<script src="tabstrip.js" defer></script>

However, for performance reasons, unless a script NEEDS to run before you lay out the document, it is best to put your script at the end of the document.

And if you don't want to worry about where your script tags are located, you can write your code so that it doesn't run until the document has been loaded. See: https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event

I suggest moving the script tag at the end of the body (just before the &lt/body> tag). The reason to position it there is that you need the script to run AFTER the table has been added to the document. Otherwise, when your script gathers a list of all the .td1 cells into the tabs list, the list ends up being empty. No list, event handlers attached. (If you right-click > Select All and then right-click > View Selection Source in JSFiddle, you'll find the script after the table.) If you strongly prefer to keep your script tag in the head section, you could try adding the defer attribute: <script src="tabstrip.js" defer></script> However, for performance reasons, unless a script NEEDS to run before you lay out the document, it is best to put your script at the end of the document. And if you don't want to worry about where your script tags are located, you can write your code so that it doesn't run until the document has been loaded. See: https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event

Thanks for that information. I didn't think about putting the script after the table. I will give that a shot.