homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

id.style.display='block' not working when inline
inline js with element id not working.

 10:03 pm on Jan 25, 2010 (gmt 0)

i've been using inline js to show/hide a div. Quite a simple task, but it wont work in ff but works smooth in ie nd chrome (where all the browsers are latest versions). here's the code...


in this the first part works even in ff, but the second one with the id of my div ACname dosent work
maybe i am missing something.. plz help
thanks in advance



 2:57 am on Jan 26, 2010 (gmt 0)

try the full statement,


and make sure there's an id on the element. If you don't use id's, you should, but you can do




where 0 is the index of the forms array in the source; so if it's the second form it would be forms[1].


 1:24 pm on Jan 26, 2010 (gmt 0)

@ rocknbil sorry for the late reply but the document.getElementById didnt work... i'v already tried it..

plus in dreamweaver the 'document' dosent even turn pink.. as it does in <script > tags (which is quite understandable as there are no script tags)

and i cant use the doc.forms as ACname is not an input or any other form tag but a div/span which lies right below the input tag and inside the 'form' tags.. i'v used 'this' for the inputs as you can see in the first part "this.size='25';" and it works in ff

so the thing i could conclude is that:

the getelementbyid dosent work without script tag,
i cannot use doc.forms as it target element is not a form obj but a div/span plus the 'documnt.' dosent work (dont know why)

i am now thinking to make all this a function and use the target div's id as a variable but i would still, just out of curiosity, would like to know what stopped it from working only in ff...


 5:11 pm on Jan 26, 2010 (gmt 0)

The correct method, as rocknbil pointed out, is to use document.getElementById. I have verified that this works, and below is a sample to show it working. I suspect you may have an error somewhere in your code, but you haven't really posted much to go by. Here is the working sample:

<style type="text/css">
#ACname {
display: none;
<input onfocus="this.size='25';document.getElementById('ACname').style.display='block';"
name="foo" value="bar">
<div id='ACname'>This is hidden</div>


 5:13 pm on Jan 26, 2010 (gmt 0)

Note, in general it's not really a good idea to use inline event handlers. Instead, I would suggest using unobtrusive JavaScript, which will give you cleaner markup and a clear separation of behavior and content.


 6:23 pm on Jan 26, 2010 (gmt 0)

hey yes it works now...! me bad..
but i am still kinda newbie...

Thanks a million both of you.. and there is only one such input, the email column (and the hidden div reads 'required but never published') so i thought to use inline js..

thanks again

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved