Cross-browser JS issue (doesn´t work in IE)

**FFighter** · Jun 26, 2006 12:49

Hello friends,

I would like some help, I have this JavaScript code that I use to set some html element styles at runtime:

<script language="JavaScript">

document.getElementById("cel1").style.backgroundColor = '#FFFFF'
var textblocks = document.getElementsByTagName("span");'
var textblock
for (var i = 0; i < textblocks.length; i++) {
textblock = textblocks[i];
textblock.style.fontFamily = 'Arial';
textblock.style.fontSize = '12px';
textblock.style.color = '#00000';
}
</script>

this code works fine on FireFox, but fails on IE... why!?

Thanks in advance,

Marcelo.

**chris_fuel** · Jun 26, 2006 13:41

Where is that code being executed?

**felgall** · Jun 26, 2006 13:49

That code should work fine across all browsers provided that it is not run before the page finishes loading. If the page hasn't finished loading then browsers may not be able to find the element to update because of it not having loaded yet.

**FFighter** · Jun 27, 2006 04:44

Thank you for the replies

Here´s the html code generated by my application. Please, watch the comments.

HTML Code:

<html>
<head>
<meta name="Generator" content="GeneXus Java"/>
<meta name="Version" content="9_0_1-072"/>
<meta name="Description" content="Cliente"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="Generator" content="GeneXus Java"/>
<meta name="Version" content="9_0_1-072"/>
<meta name="Description" content="Master Page Work With"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Cliente</title>
<link rel="stylesheet" type="text/css" href="/teste/imagens/Fantastic.css"/>
<script language="JavaScript" src="/teste/imagens/gxtypes.js"></script>
<script language="JavaScript" src="/teste/imagens/gxballoon.js"></script>

<script language="JavaScript" src="/teste/imagens/gxfwddcl.js"></script>
<script language="JavaScript" src="/teste/imagens/gxfrmutl.js"></script>
<script language="JavaScript" src="/teste/imagens/gxcallrpc.js"></script>
<script language="JavaScript" src="/teste/imagens/gxautosuggest.js"></script>
</head>
<body class="Form"  bgcolor="#000000" onload="gxonload();" onkeyup="form_onkeyup(event)" onkeydown="form_onkeypress(event,true,false);" gxoch2="form_onchange(document.forms[0].Mode, document.forms[0].IsConfirmed,false,null,'eng');">
<form id="MAINFORM" onsubmit="try{return GXValidForm()}catch(e){return true;}" name="MAINFORM" method="POST" ACTION="tcliente?INS,0">

<input type="hidden" id="_EventName" name="_EventName" value=""/>
<input type="hidden" id="_EventGridId" name="_EventGridId" value=""/>
<input type="hidden" id="_EventRowId" name="_EventRowId" value=""/><P><table id="TBL3_MPAGE" class="Table" cellpadding="0" cellspacing="0"" style=" width: 100%;" ><TBODY>
<TR>
<TD colSpan=3><table id="W0004TABLE1" class="TableTop" border="  0" cellpadding="1" cellspacing="2"" style="BACKGROUND-IMAGE: url(/teste/imagens/u);background-color: #333366;border-width:  0; width: 100%;" ><TBODY>

<TR>
<TD style="BACKGROUND-COLOR: #333366" vAlign=center bgColor=#333366><img src="/teste/imagens/images/solidus_banner.gif" id="W0004IMAGE1" class="Image" style=""/></TD>
<TD style="BACKGROUND-COLOR: #333366" vAlign=center bgColor=#333366 colSpan=0 rowSpan=0 backgroundGX><img src="/teste/imagens/images/marlos.jpg" id="W0004IMAGE2" class="Image" style=""/></TD></TR></TBODY></table></TD></TR>
<TR>
<TD colSpan=3>
<input type="hidden" id="W0005" name="W0005" value="HMainMenu"/><table id="W0005TBL2" class="Table" cellpadding="1" cellspacing="2"" style=" height: 20px;" ><TBODY>
<TR>
<TD style="HEIGHT: 20px" height=50>
<P><link rel="stylesheet" href="../imagens/menu/menu.css"><script language="JavaScript" src="../imagens/menu/menu.js"></script><script language="JavaScript">var MENU_ITEMS = [['Utilitário',null,null,['Backup da Base de Dados',null,null,['Backup da Base de Dados']]],['Financeiro',null,null,['Movimentação',null,null,['H de Hotel'],['Manter Programa']]],['Caixa',null,null,['Movimentação',null,null,['Manter Cliente']]],];</script><script language="JavaScript" src="../imagens/menu/menu_tpl.js"></script><script language="JavaScript">new menu (MENU_ITEMS, MENU_POS);</script></P></TD></TR></TBODY></table></TD></TR>
<TR>
<TD style="WIDTH: 0px" width=0></TD>
<TD style="WIDTH: 100%; BACKGROUND-COLOR: #ffffff" width="100%" bgColor=#ffffff><table id="TABLE1_MPAGE" class="ViewTable" cellpadding="1" cellspacing="2"" style="" ><TBODY>
<TR>

<TD class=TextBlock id=cel1 style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #747474; FONT-STYLE: normal; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ffffff" bgColor=#ffffff><P>
<table id="TABLE1" class="Table" cellpadding="1" cellspacing="2"" style="" ><TR><TD><span id="TEXTBLOCK2" class="TextBlock"" style="" >Cliente_ Cod</span></TD><TD><input type="text" id="CLIENTE_COD" name="CLIENTE_COD" value="0" size="18" maxlength="18" class="Attribute" style=""  gxctx="_" onFocus="gxonfocus(this, 6,'','',0)" onchange="gxonchange(this)"  onBlur="valid_integer( this,',');;GXOnBlur(6);" gxoch2="form_onchange(document.forms[0].Mode, document.forms[0].IsConfirmed,true,null,'eng');"><input type=SUBMIT name="BTN_GET" value="=>" class="BtnGet" style=""  DISABLED  gxctx="_" onFocus="gxonfocus(this, 7,'','',0)"></TD></TR><TR><TD><span id="TEXTBLOCK3" class="TextBlock"" style="" >Cliente_ Nome</span></TD><TD><input type="text" id="CLIENTE_NOME" name="CLIENTE_NOME" value="" size="30" maxlength="30" class="Attribute" style=""  gxctx="_" onFocus="gxonfocus(this, 9,'','',0)" onchange="gxonchange(this)"  onBlur=";GXOnBlur(9);" gxoch2="form_onchange(document.forms[0].Mode, document.forms[0].IsConfirmed,false,null,'eng');"></TD></TR></table><BR><BR>
<input type=SUBMIT name="BUTTON1" value="Salvar" class="RedButton" style=""  onclick="GX_setevent('EENTER.');"  gxctx="_" onFocus="gxonfocus(this, 14,'','',0)">
<input type=SUBMIT name="BUTTON2" value="Voltar" class="GreenButton" style=""  onclick="GX_js_close();return false;"  gxctx="_" onFocus="gxonfocus(this, 16,'','',0)"></P>
<P>&nbsp;</P>
<P>
<!-- My JavaScript code starts here-->
<!-- This html file, with this JS, works fine in FireFox, but fails on IE ("Invalid Property Value" Error -->
<script language="JavaScript">document.getElementById("cel1").style.backgroundColor = "0";var textblocks = document.getElementsByTagName("span");var textblock;for (var i = 0; i < textblocks.length; i++) {textblock = textblocks[i];textblock.style.fontFamily = "Arial";textblock.style.fontSize = "10px";textblock.style.color = "#FFFFFF";}</script> </P></TD></TR>
<TR>
<TD class=TextBlock id="" style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #747474; FONT-STYLE: normal; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ffffff" bgColor=#ffffff Caption="Text Block"></SPAN>
<P>TCliente</P></TD></TR></TBODY></table></TD>
<TD style="WIDTH: 0px" width=0></TD></TR>
<TR>
<TD colSpan=3>

<P><table id="W0012TBL2" class="HorizontalSpace" cellpadding="1" cellspacing="2"" style="" ><TBODY>
<TR>
<TD></TD></TR></TBODY></table>
<table id="W0012TBL5" class="HorizontalLine" cellpadding="0" cellspacing="0"" style="" ><TBODY>
<TR>
<TD></TD></TR></TBODY></table>
<table id="W0012TBL8" class="HorizontalSpace" cellpadding="0" cellspacing="0"" style="" ><TBODY>
<TR>
<TD style="BACKGROUND-COLOR: #ffffff" bgColor=#ffffff></TD></TR></TBODY></table>
<table id="W0012TABLE1" class="TableBottom" cellpadding="1" cellspacing="2"" style="background-color: #333366;" ><TBODY>
<TR align=left>
<TD align=middle>
<MARQUEE><span id="W0012TEXTBLOCK1" class="SmallText"" style="color:#FFFFFF" >Footer Info</span></MARQUEE></TD></TR></TBODY></table>
<table id="W0012TBL15" class="HorizontalSpace" cellpadding="0" cellspacing="0"" style="" ><TBODY>
<TR>
<TD style="BACKGROUND-COLOR: #ffffff" bgColor=#ffffff></TD></TR></TBODY></table>

<table id="W0012TBL18" class="HorizontalLine" cellpadding="0" cellspacing="0"" style="" ><TBODY>
<TR>
<TD></TD></TR></TBODY></table></P>
<P>&nbsp;</P></TD></TR></TBODY></table></P>
<input type="hidden" id="Z37Cliente" name="Z37Cliente" value="0"/>
<input type="hidden" id="Z38Cliente" name="Z38Cliente" value=""/>
<input type="hidden" id="IsConfirmed" name="IsConfirmed" value="0"/>
<input type="hidden" id="Mode" name="Mode" value="INS"/>
<input type="hidden" id="sCallerURL" name="sCallerURL" value="http://localhost:8080/teste/servlet/hwwcliente"/>
<input type="hidden" id="_CLIENTE_COD" name="_CLIENTE_COD" value="0"/>
<input type="hidden" id="_PGMNAME" name="_PGMNAME" value="TCliente"/>
<input type="hidden" id="_MODE" name="_MODE" value="INS"/></form>
<script language="JavaScript" type="text/javascript">
var GXBadNumMsg = "The value is not a valid number.";
var GXPARAMETERS = new Array();
function ClearNonKeyFields()
{
var obj = document.forms[0];
window.GXPkIsDirty=false;
obj.CLIENTE_NOME.value = "";
}
</script>
<script language="JavaScript" src="/teste/imagens/setevent.js"></script>
<script language="JavaScript" src="/teste/imagens/form_onchange.js"></script>

<script language="JavaScript" src="/teste/imagens/std_messages.js"></script>
<script language="JavaScript" src="/teste/imagens/gx_help.js"></script>
<script language="JavaScript" src="/teste/imagens/tcliente.js"></script>
</body>
</html>

IE throws a "Invalid Property Value" error.

As you can see, all the <span> elements are "declared" before the <script> tag with my javascript code, so, IE should have found these elements right? Or do I need to wrap this code into a function and call it on the body onLoad event?

EDIT: Ok, solved it. It was just that I was setting the backgroundColor CSS property to "0" for testing (and lazyness) purposes and while FireFox saw it as black, IE didn´t understand and throwed the "Invalid Property Value" and stopped parsing the rest of my script. Once I added a valid hexa color number, it all worked fine!

Thanks for the attention =)

Marcelo.

User Tag List

Thread: Cross-browser JS issue (doesn´t work in IE)

Thread Tools

Display

Cross-browser JS issue (doesn´t work in IE)

Bookmarks

Bookmarks

Posting Permissions