javascript script works in stackoverflow sandbox and jsfiddle but not on my website
I'm not sure this is a problem with Firefox but I have run out of other options to look at. At first I thought it might be because the page uses a frameset (I know it's obsolete) so I created a version that uses an iframe instead. That way the html that needs to be acted on is not in a frame. It still doesn't work. I don't know why it works in stackoverflow's sandbox and jsfiddle but not on my website. Any help is appreciated.
Frameset version iFrame version
If you need to see the tabstrip code (it's virtually identical to the iFrame version): Tabstrip for frameset version
The script is supposed to hilite the selected tab with a red background. The rollover works fine (yellow background and brown text) but the selected tab color never shows up.
Modified by Wayne
Chosen solution
jscher2000 said
I suggest moving the script tag at the end of the body (just before the </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.
Read this answer in context 👍 0All Replies (7)
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.
Modified by Wayne
Wayne said
I already tried that.
It's not in the tabstrip.htm page you linked to earlier. Are you sure you uploaded it?
jscher2000 said
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.
Modified by Wayne
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 </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
Chosen Solution
jscher2000 said
I suggest moving the script tag at the end of the body (just before the </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.