Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

javascript script works in stackoverflow sandbox and jsfiddle but not on my website

  • 7 uphendule
  • 1 inale nkinga
  • 302 views
  • Igcine ukuphendulwa ngu Wayne

more options

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.

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. [https://wayneca.neocities.org/FFXII/items.html Frameset version] [https://wayneca.neocities.org/FFXII/items1.html iFrame version] If you need to see the tabstrip code (it's virtually identical to the iFrame version): [https://wayneca.neocities.org/FFXII/Items/tabstrip.htm 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.

Okulungisiwe ngu Wayne

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0

All Replies (7)

more options

To load an external script, use this tag:

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

more options

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

Okulungisiwe ngu Wayne

more options

Wayne said

I already tried that.

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

more options

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.

Okulungisiwe ngu Wayne

more options

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.

more options

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

more options

Isisombululo Esikhethiwe

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.