SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Brazil
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where is that code being executed?

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Brazil
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    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.
    Last edited by FFighter; Jun 27, 2006 at 13:23.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •