getElementByID vs. getElementByTagName...need 1 for NN & IE!!

spewn · Nov 19, 2004

i had originally built my page and tested on IE...getElementByID was working great, even though i had labeled a majority of my tags as NAME= instead of ID=.

so when it came time to run in Netscape, a majority of my scripts failed. i figured out the problem, and re-labeled all the elements to include BOTH the NAME= and the ID= attributes. (i need the NAME= for cgi purposes)

then i got everything to work great. now i came to a radio button page within my site that isn't working. the original script calls for accessing the radio buttons like so:

getElementById(radioBtn[1]).checked=true;

although this works in IE, Netcape isn't buying it. it says the radioBtn[1] isn't declared, or doesn't exist.

any ideas? i was reading up on this and came across the term getElementByTagName...although the post didn't directly address my problem, it seemed related. is this better to use in terms of wider acceptance (browser-wise)...

- g

tgreer · Nov 19, 2004

You have to type it correctly:

document.getElementById()

NOT: getElementByID()

But you should also note that "radioBtn[1]" is not an ID of a control, it's an array.

So what you should do is retreive the FORM, via it's id, then the radio array:

getElementById("myForm").radioBtn[1]

Try that.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

If you found this post helpful, thank Tek-Tips by clicking and ad. Then go to my site and do the same!

BillyRayPreachersSon · Nov 20, 2004

You should always pass a string to the getElementById call. This:

Code:

getElementById(radioBtn[1]).checked=true;

is not passing a string - it's passing an array element (not an array as Thomas has previously said).

Passing a string would need quotes (single or double), like this:

Code:

document.getElementById('myRadioBtn').checked = true;

Hope this helps,
Dan

tsuji · Nov 20, 2004

Hello all,

I would give more reason to tgreer's advice. I think using getElementById() would have a hard time for a set of radio button, say. Using getElementsById() would do better. document.all() would do easily as well but more proprietary to IE.

The is the descript of getElementById by Flanagan (4th ed).

Flanagan-p731 said:
Document.getElementById()
[green]Description[/green]
This method searches the document for an Element node with an id attribute whose value is elementId, and returns that Element. If no such Element is found, it returns null. The value of the id attribute is intended to be unique within a document, and if this method finds more than one Element with the specified elementId, [red]it may return one at random or it may return null.[/red]

I think the most troublesome is it return only one element rather than a collection or array of the elements of the "same id". This is in contrast to .getElement[red]s[/red]ByName.

This is a little demo I draft up to fix the idea.

Code:

<html>
<head>
<script language="javascript">
function set_radio(sname,idx) {
	var oelem=document.getElementById(sname);	//can be null, or at random one element
	alert (oelem != null);
	if (oelem !=null) {
		alert(oelem.value);	//this show that there would be no chance to get to the other index
	}

	var celem=document.getElementsByName(sname);
	alert(celem!=null);
	celem[idx].checked=true;
}
</script>
</head>
<body>
<form name="formname">
<input type="radio" id="rbtn" name="rbtn" value="rbtn0" checked />rbtn1<br />
<input type="radio" id="rbtn" name="rbtn" value="rbtn1" />rbtn2<br />
<input type="radio" id="rbtn" name="rbtn" value="rbtn2" />rbtn3<br />
<input type="button" id="btn" value="change rbtn3 to checked" onclick="set_radio('rbtn',2);" />
</form>
</body>
</html>

If as suggested by tgree, one getElementById() on the form's id, then its child elements can then further be manipulated.

regards - tsuji

tsuji · Nov 20, 2004

Correction (typo):

>Using getElementsBy[red]Name[/red]() would do better.

- tsuji

tgreer · Nov 20, 2004

Thanks for the corrections and amplifications to my post.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

getElementByID vs. getElementByTagName...need 1 for NN & IE!!

spewn

Programmer

tgreer

Programmer

BillyRayPreachersSon

Programmer

tsuji

Technical User

tsuji

Technical User

tgreer

Programmer

Similar threads

Part and Inventory Search

Sponsor