assistence needed getElementById + array for radiobutton

[sofie]

Hello all,

I use the following javascript function in a html document to set the
level of one of eight available radiobuttons. The line that's
commented out works fine under IE, but I need to rewrite it so that
it's W3C compliant. Reading through earlier messages I concluded I
should go with getElementById but this doesn't work. What am I doing
wrong?

Your help is much appreciated.

Sofie



function SetRadioLevel(iLevel)
{
document.getElementById('radiobutton')[8-iLevel].checked = true;
// document.all.radiobutton[8-iLevel].checked = true;
}


which refers to:


<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(8)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(7)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(6)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(5)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(4)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(3)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(2)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(1)">

 

[Michael Winter]

sofie wrote on 01 Dec 2003:

Hello all,

I use the following javascript function in a html document to
set the level of one of eight available radiobuttons. The line
that's commented out works fine under IE, but I need to rewrite
it so that it's W3C compliant. Reading through earlier messages
I concluded I should go with getElementById but this doesn't
work. What am I doing wrong?

What you have written below shouldn't work in any browser.
document.getElementById() is supposed to return a single element. IDs
are unique in a document, so there shouldn't be any possibility of
returning more than one. Also, it should only return the element with
a matching id attribute - name shouldn't even be considered. I just
wanted to point that out...

The fix is /really/ simple: use document.getElementsByName(). This is
designed to return a collection of all elements that have a matching
name attribute. However, be aware: the returned elements can appear
anywhere in the document. You can't get elements from a specific
scope. Make sure that the group returned can only be a unique group.
That is, the 'SetZoomLevel' group below should be the only controls
anywhere in your document with the name 'radiobutton'.

function SetRadioLevel(iLevel)
{
document.getElementById('radiobutton')[8-iLevel].checked =
true;
// document.all.radiobutton[8-iLevel].checked = true;
}

<input type="radio" name="radiobutton" value="radiobutton"
onClick="JavaScript:SetZoomLevel(8)">

A question: why are you using the JavaScript protocol in an intrinsic
event? That's supposed to only be used as a URI specifier. To declare
what language intrinsic events use, you must (that is, it is
*mandatory*) specify the default language using either a META element
or a HTTP header:

<META http-equiv="Content-Script-Type" content="text/javascript">

Without it, your HTML document is invalid, and depends on unreliable
browser behaviour. Browsers don't have to execute intrinsic events if
a default language isn't specified.

Mike

 

[Douglas Crockford]

I use the following javascript function in a html document to set the

level of one of eight available radiobuttons. The line that's
commented out works fine under IE, but I need to rewrite it so that
it's W3C compliant. Reading through earlier messages I concluded I
should go with getElementById but this doesn't work. What am I doing
wrong?

function SetRadioLevel(iLevel)
{
document.getElementById('radiobutton')[8-iLevel].checked = true;
// document.all.radiobutton[8-iLevel].checked = true;
}

which refers to:

<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(8)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(7)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(6)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(5)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(4)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(3)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(2)">
<input type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(1)">

Give each button a unique id. For example,

<input id="zoom8" type="radio" name="radiobutton"
value="radiobutton" onClick="JavaScript:SetZoomLevel(8)">

document.getElementById('zoom' + iLevel).checked = true;

http://www.crockford.com

 

[holland amsterdam]

Thank you for your reply! I think I can work out that one with these
tips. I hop e you don't mind if I post another one straight away? My
previous question, as well as this one refer to a GIS website whereby a
map is loaded into an iframe.

The main window contains numerous (radio)buttons used for panning,
zooming etc on a map located in an iframe.

This was all working fine under IE, but NS and Mac won't have it. My
initial code was as follows:

The iframe src-document zoomlevel function:

function SetZoomLevel(level)
{
iLevel = level;
return Refresh();
}

whereby iLevel is a parameter stored in the <head>.

The main page then refers to this function by:

function SetZoomLevel(level)
{
sURL = top.mapframe_ie.SetZoomLevel(level);
}

Does this seem like a logical solution, and if so, what do I use to
replace 'top.' to make it W3C compliant?

thanks again,
Sophie