problem with getElementById()

[Flessen]

I'm having trouble getting the getElementById() command working properly, I've tested in various browsers and looked around to see if I can find the issue elsewhere and compared my code with others and I can't see a reason why it wouldn't work...

Here's the code in my header:

function header(x,y)
{
	document.getElementByID(x).style.display = 'block';
	document.getElementByID(y).style.display = 'none';
}

And the HTML:

<form action="blah.html" method="post" enctype="multipart/form-data" name="adevent2">
   <input type="radio" name="heads" value="image" checked="checked" onselect="header('usefile','usecolour')" />Use background image<br /><br />
   <div id="usefile" style="display:block;">
      <label for="file">File to upload:</label>
      <input id="file" type="file" name="file" /><br />
   </div>
   <input type="radio" name="heads" value="colour" onselect="header('usecolour','usefile')" />Do not use background image<br /><br />
   <div id="usecolour" style="display:none;">
      <input type="text" id="headbgsample" name="headbgsample" size="1"  value=""><br />
   </div>

[coothead]

Hi there Flessen,

your problems are caused by a typing error.

This...

document.getElementByID

...should be...

document.getElementById

coothead

[WolfShade]

What coothead said, plus..

Not every browser plays well with display="block", so use this, instead:

function header(x,y)
{
	document.getElementById(x).style.display = ''; //Set this to blank.
	document.getElementById(y).style.display = 'none';
}

[Flessen]

thank you very much for the input, I'd completely overlooked that.. but for some reason, it's still not actually functioning...

[WolfShade]

Is there a JavaScript error?

[coothead]

Hi there Flessen,

it appears that you are also using the wrong event handler.
Try onclick instead.

coothead

[Kor]

What coothead said, plus..

Not every browser plays well with display="block"

No. All the browsers play well with the display block. But not all the elements, according to the standards, may have the display "block". For instance tables and table elements. They have specific "positive" display, but not "block":

http://www.w3.org/TR/CSS2/tables.html#table-display

Well, not for IE < 9. IE uses "block" and not the standard table display. Therefor, but only in this case (table and table elements) it is valuable what you have said: the empty value "" is cross browser, while "block" it is not

[Flessen]

Thank you very much, I originally used onclick, I switched to onselect hoping it would resolve the problem, turns out that attempt at a resolution just worsened things ¬_¬

Either way, I've got it working now, thanks to your keen eyes. I appreciate the help guys ^_^

[coothead]

No problem, you're very welcome.