Pesquisar no apoio

Evite burlas no apoio. Nunca iremos solicitar que telefone ou envie uma mensagem de texto para um número de telefone ou que partilhe informações pessoais. Por favor, reporte atividades suspeitas utilizando a opção "Reportar abuso".

Saber mais

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

  • 7 respostas
  • 1 tem este problema
  • 1 visualização
  • Última resposta por 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.

Modificado por Wayne a

Solução escolhida

jscher2000 said

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.

Ler esta resposta no contexto 👍 0

Todas as respostas (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

Modificado por Wayne a

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.

Modificado por Wayne a

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 &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

more options

Solução escolhida

jscher2000 said

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.