Welcome to WebmasterWorld Guest from 54.196.224.166

Forum Moderators: incrediBILL

Message Too Old, No Replies

id.style.display='block' not working when inline

inline js with element id not working.

     

achshar

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

5+ Year Member



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

onfocus="this.size='25';ACname.style.display='block';"

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

rocknbil

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



try the full statement,

document.getElementById('ACname').style.display='block';

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

document.forms['formname'].ACname.style.display='block';

or

document.forms[0].ACname.style.display='block';

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

achshar

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

5+ Year Member



@ 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...

Fotiman

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

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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:


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

Fotiman

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

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

achshar

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

5+ Year Member



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