HTML code works alone, but not with forum Header/Footers

by Zarvis January 6th 2010, 12:18 am

To help teach myself to write HTML and Javascript better, part of my project is a custom HTML page. So far it works as it should if I launch the .html file from my desktop, or if I upload the page to the forums without the "Do you wish to use your forum page header and page footer ?" option enabled. If I enable this, most of it still works, but the javascript to add options to my drop down box stops working.

I tried adding a prefix to all of the functions, names, and variables in case any of them were in use by the header or footer, but I still have the same problem.

Code:: <html> <body> <script type="text/javascript"> function doro_addOption(doro_selectbox,doro_text,doro_value) { var doro_optn = document.createElement("OPTION"); doro_optn.text = doro_text; doro_optn.value = doro_value; doro_selectbox.options.add(doro_optn); } function doro_Desc() { var doro_desc = document.doro_contractList.doro_Contracts.value; document.doro_contractDesc.doro_ContractDesc.value = doro_desc; } </script> <center> <table> <td> <form name="doro_contractList"> <select name="doro_Contracts" onchange="doro_Desc()" size="30" style="color:white; background-color:#333333"> </select> </form> </td> <td> <form name="doro_contractDesc"> <textarea style="color:white; background-color:#333333" rows="30" cols="100" name="doro_ContractDesc" disabled></textarea> </form> </td> </table> </center> <script type="text/javascript"> for(var doro_x=0;doro_x<10;doro_x++){ doro_addOption(doro_contractList.doro_Contracts,doro_x,doro_x); } </script> </body> </html>

by Etana January 8th 2010, 1:51 am

Hello,

I've just tried it with google chrome and no problem.

Maybe you have let the header and the footer of your page and with another navigator that cause an issue.

Have you tried this code when you enable the page header and footer :

Code:: <script type="text/javascript"> function doro_addOption(doro_selectbox,doro_text,doro_value) { var doro_optn = document.createElement("OPTION"); doro_optn.text = doro_text; doro_optn.value = doro_value; doro_selectbox.options.add(doro_optn); } function doro_Desc() { var doro_desc = document.doro_contractList.doro_Contracts.value; document.doro_contractDesc.doro_ContractDesc.value = doro_desc; } </script> <center> <table> <td> <form name="doro_contractList"> <select name="doro_Contracts" onchange="doro_Desc()" size="30" style="color:white; background-color:#333333"> </select> </form> </td> <td> <form name="doro_contractDesc"> <textarea style="color:white; background-color:#333333" rows="30" cols="100" name="doro_ContractDesc" disabled></textarea> </form> </td> </table> </center> <script type="text/javascript"> for(var doro_x=0;doro_x<10;doro_x++){ doro_addOption(doro_contractList.doro_Contracts,doro_x,doro_x); } </script>

If that doesn't work, can you give me a link of a page with the code which doesn't work ?

Cordially.

by Zarvis January 8th 2010, 2:17 am

I tried again in my normal browser (Firefox) and it still didn't work if I turned on header and footer, however in Internet Explorer it works exactly as it should. I guess it's a Firefox issue then.

by Etana January 8th 2010, 2:36 am

Yes I've just try it with firefox and that doesn't work either.

But adding one :

Code:: document.

To get this code :

Code:: <script type="text/javascript"> function doro_addOption(doro_selectbox,doro_text,doro_value) { var doro_optn = document.createElement("OPTION"); doro_optn.text = doro_text; doro_optn.value = doro_value; doro_selectbox.options.add(doro_optn); } function doro_Desc() { var doro_desc = document.doro_contractList.doro_Contracts.value; document.doro_contractDesc.doro_ContractDesc.value = doro_desc; } </script> <center> <table> <td> <form name="doro_contractList"> <select name="doro_Contracts" onchange="doro_Desc()" size="30" style="color:white; background-color:#333333"> </select> </form> </td> <td> <form name="doro_contractDesc"> <textarea style="color:white; background-color:#333333" rows="30" cols="100" name="doro_ContractDesc" disabled> </textarea> </form> </td> </table> </center> <script type="text/javascript"> for(var doro_x=0;doro_x<10;doro_x++){ doro_addOption(document.doro_contractList.doro_Contracts,doro_x,doro_x); } </script>