.style.display = 'none'; not working

javascript style display = 'none' help

[toccovender]

<input type="button" onClick="document.mainform.main.style.display = 'none';">
<form name="mainform">
<div name="main">
content to be dissapeared on button click
</div>
thats basically the code im trying to make but whenever im doing it it doesnt work... im using windows vista and am on the latest version of IE.. any help would be greatly appreciated

[Trace]

It's probably easier to just give your div an ID and access it that way.

<input type="button" onclick="document.getElementById('main').style.display = 'none';">

<div id="main">
content to be dissapeared on button click
</div>

[WesleyC]

Yes, I believe this is your problem. I don't think the name attribute has any effect on non-input elements.

[Fotiman]

Correct. The name attribute is invalid on your div element. Try this:

<input type="button" onclick="function(){document.getElementById("main").style.display = 'none';}";
<form name="mainform">
<div id="main">
content to be dissapeared on button click
</div>

[Bernard Marx]

Fotiman made an uncharacteristic little slip or two.
Change the top line to:

<input type="button" onclick="document.getElementById('main').style.display = 'none';">

[Fotiman]

Aye, that I did. :) Not used to working with inline attributes... I've come to avoid them whenever possible.

[toccovender]

thanks everyone i didnt know it had to be getElementById for style but i figured it out thanx

[syktek]

thanks everyone i didnt know it had to be getElementById for style but i figured it out thanx

you don't have to use getElementById for style but it's easier to find your object by id since id are unique.

you could always use getElementsByName which will create an array of all names you ask it to look for in the document and set style to that.

this (DOM:document.getElementsByName [developer.mozilla.org]) shows you how to use it though using getElementById is probably your best bet.