Showing and Hiding DIV's generated dynamically

cptn_spoon

05-03-2004, 08:07 AM

Ok, I am very new to JS, but I have had a fair bit of experience in PHP, ASP, .NET (<- bah), pearl and a few others so I know coding concepts :)

Here is my problem: I have an external JS file that I am loading an array from (places[]). I have a form on the page that creates checkboxes from the array as follows:

<tr><td>
Place(s) :
</td><td>
<script language=Javascript>

</script>
</td></tr>

The onClick handler that I have put in there is where the problem starts. It is MEANT to display various DIV tags that I have made invlisible like so:

<div id='BankstownDiv' style="display: none;">
<h2>Bankstown Lecturer</h2>
Same As Unit Coordinator:
<input type="checkbox" name="Bankstown" id="Bankstown" />
Name : <br />
<input type="text" name="CLName" /><br />
Location - <br />
Room Number : <br />
<input type="text" name="CLRoom" /> <br />
Building :<br />
<input type="text" name="CLBuilding" /><br />
</div>
etc.....

And this is the Javascript function that I have placed in the HEAD of the doco:

function HideUnhide(objectID)
{
if(document.getElementByID(objectID).style.display == 'none' ) {
document.getElementById(objectID).style.display = 'block';
}
else{
document.getElementById(objectID).style.display = 'none';
}
}

Now when I test it in IE6 I get an error "Object doesn't support this property or method" and it points me to the following line of code:

function HideUnhide(objectID)
{
[B][U]if(document.getElementByID(objectID).style.display == 'none' )[U][B] {
document.getElementById(objectID).style.display = 'block';
}
else{
document.getElementById(objectID).style.display = 'none';
}
}

As far as I was aware, the DIV element (which I am referring to, for example, the value for place[2]="Bankstown" and I simply refer to its DIV tag --which is called BankstownDiv -- by stating place[2]+"Div") DOES have a style.display method...at least that what some JS tutes have indicated, and I can get the DIV's initially hidden using the style="display:none;" attribute but I simple can not work out why this script wont run successfully.

Any help would be GREATLY appreciated!! :thumbsup:

Thanks in advance fellas!

-cptn_spoon

Kor

05-03-2004, 08:23 AM

...DOES have a style.display method...

... the div MUST have set a display CSS, otherwise the if statement woun't work (there is no default values for style.attributes in javascript). More than that, the CSS should be placed in tag as style, not as a class or id, because the method style,attribute will search for a style attribute value, not for an id or a class CSS embeded or external)

cptn_spoon

05-03-2004, 08:28 AM

Im not sure I follow what you mean Kor, is it possible for you to point out the problem in the code I supplied?

Thanks for the reply regardless!

glenngv

05-03-2004, 08:35 AM

try:

for(var i=0; i<places.length; i++) {
document.write('<input type="checkbox" name="'+places[i]+'" onclick="HideUnhide(\''+places[i]+'Div\')" />'+places[i]);
}

cptn_spoon

05-03-2004, 08:46 AM

Worked like a charm. Thanks glenn

I see my mistake now!

Kor

05-03-2004, 09:11 AM

... I was to send the same code line... but... bizzare, it woun't work

Kor

05-03-2004, 09:20 AM

:confused:

My test failed... I don't see why... glenngv?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function bla(){
places='Bla';
param = places+'Div';
document.write('<input type="checkbox" name="'+places+'" onClick="hideUnhide(\''+param+'\')">'+places+'</input>');
alert(document.body.innerHTML)
}
function hideUnhide(a){
alert(a)
}
window.onload=bla
</script>
</head>

<body>
</body>
</html>

glenngv

05-03-2004, 09:25 AM

You are doing a document.write statement after the document has loaded, causing the current document to be replaced by a new document.

Kor

05-03-2004, 10:29 AM

aha... I don't use document.write at all (I preffere document.getElementById(id).innerText and document.getElementById(id).innerHTML ) so I am not used with it.

Thank you for replay