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(i Level)
{
document.getEle mentById('radio button')[8-iLevel].checked = true;
// document.all.ra diobutton[8-iLevel].checked = true;
}


which refers to:


<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(8)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(7)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(6)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(5)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(4)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(3)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(2)">
<input type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(1)">

[Michael Winter]

Re: assistence needed getElementById + array for radiobutton

sofie wrote on 01 Dec 2003:
[color=blue]
> 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?[/color]

What you have written below shouldn't work in any browser.
document.getEle mentById() 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.getEle mentsByName(). 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'.
[color=blue]
> function SetRadioLevel(i Level)
> {
> document.getEle mentById('radio button')[8-iLevel].checked =
> true;
> // document.all.ra diobutton[8-iLevel].checked = true;
> }
>
> <input type="radio" name="radiobutt on" value="radiobut ton"
> onClick="JavaSc ript:SetZoomLev el(8)">[/color]

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

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

[Douglas Crockford]

Re: assistence needed getElementById + array for radiobutton

> I use the following javascript function in a html document to set the[color=blue]
> 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?[/color]
[color=blue]
> function SetRadioLevel(i Level)
> {
> document.getEle mentById('radio button')[8-iLevel].checked = true;
> // document.all.ra diobutton[8-iLevel].checked = true;
> }[/color]
[color=blue]
> which refers to:[/color]
[color=blue]
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(8)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(7)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(6)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(5)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(4)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(3)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(2)">
> <input type="radio" name="radiobutt on"
> value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(1)">[/color]

Give each button a unique id. For example,

<input id="zoom8" type="radio" name="radiobutt on"
value="radiobut ton" onClick="JavaSc ript:SetZoomLev el(8)">

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

http://www.crockford.com

[holland amsterdam]

Re: assistence needed getElementById + array for radiobutton

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(le vel)
{
iLevel = level;
return Refresh();
}

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

The main page then refers to this function by:

function SetZoomLevel(le vel)
{
sURL = top.mapframe_ie .SetZoomLevel(l evel);
}

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



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!