Connecting Tech Pros Worldwide Forums | Help | Site Map

Help with loop/naming elements

Ed Jay
Guest
 
Posts: n/a
#1: Dec 4 '05
<disclaimer>New to js.</disclaimer>

I have several pages, each with menues comprising checkboxes or radio
boxes within the same form. I presently 'brute force' clear the buttons
with individual scripts for each form, e.g.:

function clearLa() {
window.document.form1.button1La.checked=false;
window.document.form1.button2La.checked=false;
window.document.form1.button3La.checked=false;
window.document.form1.button4La.checked=false;
window.document.form1.button5La.checked=false;
}

Another set of buttons in the same form might be call, e.g., button1Ra et
seq.

I tried to simplify the above with a simple loop:

var counter = 1;
function clearLa() {
while (counter < 6) {
window.document.form1.button[counter]La.checked=false;
counter++;
}
}

But it seems to go into an infinite loop. Where am I going wrong?

I would ultimately like to have a single generic routine that I can pass
the number of buttons in the menu as well as the name of the button set
(e.g., buttonLa, buttonXz, etc. So, for a set of 8 buttons called
buttons1xy, button2xy...button8xy, I can write something like
'onClick = "clearButtons(xy,8).' How do I do it?

--
Ed Jay (remove M to respond by email)

Danny
Guest
 
Posts: n/a
#2: Dec 4 '05

re: Help with loop/naming elements


Well, try ->


function toggleAll(el, state) {
for (i=0;i<el.length;i++)
el[i].checked=state;
}

-----------------------------------------------------------

<form name="SOMETHING">

<input type="radio" name="DUCKS" value="1">
<input type="radio" name="DUCKS" value="2">
<input type="radio" name="DUCKS" value="3">
<input type="radio" name="DUCKS" value="4">
<input type="checkbox" name="DOVES" value="1">
<input type="checkbox" name="DOVES" value="2">
<input type="checkbox" name="DOVES" value="3">
<input type="checkbox" name="DOVES" value="4">
.....

<input type="button" onclick="toggleAll(this.form.DUCKS,
false)" value="unchek all ducks">
<input type="button" onclick="toggleAll(this.form.DUCKS,
true)" value="chek all ducks">
<input type="button"
onclick="toggleAll(this.form.DOVES, false)" value="unchek all doves">
<input type="button"
onclick="toggleAll(this.form.DOVES, true)" value="chek all doves">

</form>


Danny
Ed Jay
Guest
 
Posts: n/a
#3: Dec 4 '05

re: Help with loop/naming elements


Lee <REM0VElbspamtrap@cox.net> wrote:
[color=blue]
>Ed Jay said:[color=green]
>>
>><disclaimer>New to js.</disclaimer>
>>
>>I have several pages, each with menues comprising checkboxes or radio
>>boxes within the same form. I presently 'brute force' clear the buttons
>>with individual scripts for each form, e.g.:
>>
>> function clearLa() {
>> window.document.form1.button1La.checked=false;
>> window.document.form1.button2La.checked=false;
>> window.document.form1.button3La.checked=false;
>> window.document.form1.button4La.checked=false;
>> window.document.form1.button5La.checked=false;
>>}
>>
>>Another set of buttons in the same form might be call, e.g., button1Ra et
>>seq.
>>
>>I tried to simplify the above with a simple loop:
>>
>>var counter = 1;
>>function clearLa() {
>>while (counter < 6) {
>>window.document.form1.button[counter]La.checked=false;
>>counter++;
>>}
>>}
>>
>>But it seems to go into an infinite loop. Where am I going wrong?
>>
>>I would ultimately like to have a single generic routine that I can pass
>>the number of buttons in the menu as well as the name of the button set
>>(e.g., buttonLa, buttonXz, etc. So, for a set of 8 buttons called
>>buttons1xy, button2xy...button8xy, I can write something like
>>'onClick = "clearButtons(xy,8).' How do I do it?[/color]
>
>I don't believe your code goes into an infinite loop, but it's not
>going to do what you want, either.
>Although it's not causing problems, you really should initialize your
>"counter" variable inside the function.
>The important point you've missed is that when referring to form
>elements using square-bracket notation, the bracket must contain
>the entire name of the element, not just the variable part:
>
> document.form1.elements["button"+counter+"La"].checked=false;
>[/color]
Thanks. As you can see from the header, I suspected as much.[color=blue]
>
>function clearButtons(suffix,count) {
> while (count) {
> document.form1.elements["button"+(count--)+suffix].checked=false;
> }
>}
>
>called as:
>
> onclick = "clearButtons('La',8)"[/color]

This appears to be exactly what I'm trying to do. Thanks.[color=blue]
>
>
>There are alternatives, such as naming all 8 buttons "buttonLa"
>and allowing the browser to build the array for you:
>
> function clearButtons(suffix) {
> for(var i=0;i<document.form1.elements["buttons"+suffix].count) {
> document.form1.elements["button"+suffix][i].checked=false;
> }
> }
>
>
>[/color]

--
Ed Jay (remove M to respond by email)
Ed Jay
Guest
 
Posts: n/a
#4: Dec 4 '05

re: Help with loop/naming elements


Danny <dann90038@bluebottle.com> wrote:
[color=blue]
> Well, try ->
>
>
> function toggleAll(el, state) {
> for (i=0;i<el.length;i++)
> el[i].checked=state;
> }
>
>-----------------------------------------------------------
>
> <form name="SOMETHING">
>
> <input type="radio" name="DUCKS" value="1">
> <input type="radio" name="DUCKS" value="2">
> <input type="radio" name="DUCKS" value="3">
> <input type="radio" name="DUCKS" value="4">
> <input type="checkbox" name="DOVES" value="1">
> <input type="checkbox" name="DOVES" value="2">
> <input type="checkbox" name="DOVES" value="3">
> <input type="checkbox" name="DOVES" value="4">
> .....
>
> <input type="button" onclick="toggleAll(this.form.DUCKS,
>false)" value="unchek all ducks">
> <input type="button" onclick="toggleAll(this.form.DUCKS,
>true)" value="chek all ducks">
> <input type="button"
>onclick="toggleAll(this.form.DOVES, false)" value="unchek all doves">
> <input type="button"
>onclick="toggleAll(this.form.DOVES, true)" value="chek all doves">
>
> </form>
>
>[/color]
Thanks, Danny. This is simple and elegant.

--
Ed Jay (remove M to respond by email)
Ed Jay
Guest
 
Posts: n/a
#5: Dec 7 '05

re: Help with loop/naming elements


Ed Jay <edMbj@aes-intl.com> wrote:
[color=blue]
><disclaimer>New to js.</disclaimer>
>[/color]
I've progressed to a state of frustration.

I select one of 6 radio buttons. Each has the same name, but different
values. When a button is selected, an onClick function brings up another
menu. I want the second menu to use a string returned from the js
function.

The js:

var s= [
'uniform Thermal Pattern',
'regular thermovascular pattern',
'thermovascular network',
'irregular thermovascular pattern',
'distorted thermovascular pattern',
'anarchic thermovascular pattern'
]

function checkRadio(field) {
for(var i=0; i < field.length; i++)
if(field[i].checked)
alert("Alert in loop: " + s[i]);
document.write(s[i]);
return s[i];
}

I want to use the returned string as part of a dynamic sentence. E.g,

'The
<script type="text/javascript>
checkRadio(buttonName);document.write(s[i])
</script>
and more text.

I've also tried document.write(checkRadio(buttonName);

I'm executing the script up to "return s[i];" If I put an alert after the
function call, I get the alert.

Besides trying to write in a language I don't understand, where have I
gone wrong in the above?

TIA,

--
Ed Jay (remove M to respond by email)
RobG
Guest
 
Posts: n/a
#6: Dec 7 '05

re: Help with loop/naming elements


Ed Jay wrote:[color=blue]
> Ed Jay <edMbj@aes-intl.com> wrote:
>
>[color=green]
>><disclaimer>New to js.</disclaimer>
>>[/color]
> I've progressed to a state of frustration.
>
> I select one of 6 radio buttons. Each has the same name, but different
> values. When a button is selected, an onClick function brings up another
> menu. I want the second menu to use a string returned from the js
> function.
>
> The js:
>
> var s= [
> 'uniform Thermal Pattern',
> 'regular thermovascular pattern',
> 'thermovascular network',
> 'irregular thermovascular pattern',
> 'distorted thermovascular pattern',
> 'anarchic thermovascular pattern'
> ]
>
> function checkRadio(field) {
> for(var i=0; i < field.length; i++)
> if(field[i].checked)
> alert("Alert in loop: " + s[i]);
> document.write(s[i]);
> return s[i];
> }
>
> I want to use the returned string as part of a dynamic sentence. E.g,
>
> 'The
> <script type="text/javascript>
> checkRadio(buttonName);document.write(s[i])[/color]

Your checkRadio function returns the index, so the call to checkRadio
replaces the index 'i':

document.write(s[checkRadio(buttonName)]);

[color=blue]
> </script>
> and more text.
>
> I've also tried document.write(checkRadio(buttonName);[/color]

Close, but no cigar... you forgt the 's'. Alternatively, have
checkRadio return s[i], then the above line will work provided you fix
the syntax error.


document.write(checkRadio(buttonName));
// note additional closing bracket---^


[...]


--
Rob
Ed Jay
Guest
 
Posts: n/a
#7: Dec 7 '05

re: Help with loop/naming elements


RobG <rgqld@iinet.net.au> wrote:
[color=blue]
>Ed Jay wrote:[color=green]
>> Ed Jay <edMbj@aes-intl.com> wrote:
>>
>>[color=darkred]
>>><disclaimer>New to js.</disclaimer>
>>>[/color]
>> I've progressed to a state of frustration.
>>
>> I select one of 6 radio buttons. Each has the same name, but different
>> values. When a button is selected, an onClick function brings up another
>> menu. I want the second menu to use a string returned from the js
>> function.
>>
>> The js:
>>
>> var s= [
>> 'uniform Thermal Pattern',
>> 'regular thermovascular pattern',
>> 'thermovascular network',
>> 'irregular thermovascular pattern',
>> 'distorted thermovascular pattern',
>> 'anarchic thermovascular pattern'
>> ]
>>
>> function checkRadio(field) {
>> for(var i=0; i < field.length; i++)
>> if(field[i].checked)
>> alert("Alert in loop: " + s[i]);
>> document.write(s[i]);
>> return s[i];
>> }
>>
>> I want to use the returned string as part of a dynamic sentence. E.g,
>>
>> 'The
>> <script type="text/javascript>
>> checkRadio(buttonName);document.write(s[i])[/color]
>
>Your checkRadio function returns the index, so the call to checkRadio
>replaces the index 'i':
>
>
>[/color]
I edited my calling code to that as shown, above. I changed the Return
statement from 'return s[i];' to 'return 'i;' It still doesn't work.[color=blue]
>[color=green]
>> </script>
>> and more text.
>>
>> I've also tried document.write(checkRadio(buttonName);[/color]
>
>Close, but no cigar... you forgt the 's'. Alternatively, have
>checkRadio return s[i], then the above line will work provided you fix
>the syntax error.[/color]

How?[color=blue]
>
> document.write(checkRadio(buttonName));
> // note additional closing bracket---^
>[/color]
For troubleshootong purposes, I rewrote radioCheck() as

function checkRadio(field) {
for(var i=0; i < field.length; i++)
if(field[i].checked)
document.write(s[i]);
document.write(i);
return i;
}

When called inline with:

<script type="text/javascript>
document.write(s[checkRadio(buttonName)]);
alert("Made it");
</script>

A new otherwise blank window appears with the correctly indexed string
followed by the index, 'i.' I do not get the alert. More interesting (to
me), when called, the function prints the correctly indexed string, but
the index always shows as 1 more than the array length. This tells me that
the loop progresses until it finds the checked radio button, prints s[i],
and continues to count through all values of i until it reaches the limit.

Playing around, I changed the loop to read:

function checkRadio(field) {
for(var i=0; i < field.length; i++)
if(field[i].checked) {ppp = i;
document.write(s[i]);
document.write(i);
document.write(ppp);
return i;
}
}

I still don't get the returned value, but the function at least shows the
correct index value and correct ppp. By this I mean that if I select
Button 3, the new window shows s[i] = s[3] and both i and ppp are written
as 3.

Regardless, I don't seem to be getting past the 'return i;' statement as
the alert following the code call isn't triggered.

--
Ed Jay (remove M to respond by email)
Closed Thread


Similar JavaScript / Ajax / DHTML bytes