Help with naming elements in a loop

[Ed Jay]

I have a switch statement that controls which of several containers is
displayed or not. It currently looks like:

function showHelp(n) {
show('vhelp'); //makes parent container visible
switch (n){
case 0:
show('image0');hide('image1');hide('image2');...;h ide('imagem');
break;
..
..
case m:
show('imagem');hide('image0');...;hide('imagem-1');
}

The functions show('target') and hide('target') are simple js functions,
i.e., : document.getElementById(target).style.display = "" //(or "none")

I want to change the lengthy show/hide strings. I've tried using
variations to name the appropriate containers in the function:

function xImages (n) {
for(var i=0; i <m+1; i++) { //I hard enter m+1
if (i==n) {document.form1.elements["image"+(i)].style.display="";}
else {document.form1.elements["image"+(i)].style.display='none';}
}

I get the error msg message:
Could not convert undefined or null to object
document.form1.elements[("image" + i)].style.display = "none";

Apparently I'm not addressing the container properly, but I can't comeup
with the correct syntax. HELP! Please.
--
Ed Jay (remove 'M' to respond by email)

[Erwin Moller]

Ed Jay wrote:

I have a switch statement that controls which of several containers is
displayed or not. It currently looks like:

function showHelp(n) {
show('vhelp'); //makes parent container visible
switch (n){
case 0:
show('image0');hide('image1');hide('image2');...;h ide('imagem');
break;
..
..
case m:
show('imagem');hide('image0');...;hide('imagem-1');
}

The functions show('target') and hide('target') are simple js functions,
i.e., : document.getElementById(target).style.display = "" //(or "none")

I am unsure if the empty string is a valid value for display.
Try 'inline' for span-like elements (elements that flow with the tekst)
or use 'block' for div-like elements.

>
I want to change the lengthy show/hide strings. I've tried using
variations to name the appropriate containers in the function:

function xImages (n) {
for(var i=0; i <m+1; i++) { //I hard enter m+1
if (i==n) {document.form1.elements["image"+(i)].style.display="";}
else {document.form1.elements["image"+(i)].style.display='none';}
}

I get the error msg message:
Could not convert undefined or null to object
document.form1.elements[("image" + i)].style.display = "none";

I think you better start with checking what your form contains.
It strikes me that you address your images via your form...
You usually use document.images.etc to address images.
Or when they are labeled with an id, getElementById().
My advise:
- put all images you want to be able to show/hide in seperate divs, naming
the divs like this:
<div id="imgdiv0" style="display:block">
<img src="images/img0.gif">
</div>

Or use span if that is more appropriate.

Now address the div instead of a formelement, which it is not, like this:
var myRef = document.getElmentById("imgdiv0");
myRef.style.display = "none";
or
myRef.style.display = "block";

In case of span use 'inline' instead of 'block'.

Hope that helps,

Regards,
Erwin Moller

>
Apparently I'm not addressing the container properly, but I can't comeup
with the correct syntax. HELP! Please.

[Richard Cornford]

Erwin Moller wrote:

Ed Jay wrote:

<snip>

>The functions show('target') and hide('target') are simple js functions,
i.e., : document.getElementById(target).style.display = "" //(or "none")

I am unsure if the empty string is a valid value for display.

<snip>

An empty string is a valid value to assign to any property of an
element's - style - object that is expecting a string type (almost all
except zIndex). As the - style - object reflects the values assigned
using the STYLE attribute in HTML assigning an empty string is
equivalent to removing a CSS declaration from the STYLE attribute, so
the applied style becomes those derived from external style sheets or
the browser's default.

Assigning an empty string is in fact a useful facility where specific
elements have various values depending on the browser. For example, a
TD element may be - display:table-cell; - on modern browsers and -
display:block - on IE, and setting 'block' were 'table-cell' is
expected produces unexpected effects. So switching a TD from -
display:none; - to a state where it is displayed either requires
knowing (or working out) which value actually applies on the browser in
question, or assigning a value that removes the 'none' value and allows
the element to revert to its default. for which an empty string is an
ideal value.

You usually use document.images.etc to address images.
Or when they are labeled with an id, getElementById().

<snip>

The W3C HTML DOM specification requires that IMG elements can be
referenced in the document.images collection with their ID attributes
as well as by NAME attribute. So even if the IMG only has an ID
attribute it is still not necessary to use - getElementById -.

Richard.

[Ed Jay]

Erwin Moller scribed:

>Ed Jay wrote:

>I have a switch statement that controls which of several containers is
displayed or not. It currently looks like:

function showHelp(n) {
show('vhelp'); //makes parent container visible
switch (n){
case 0:
show('image0');hide('image1');hide('image2');...; hide('imagem');
break;
..
..
case m:
show('imagem');hide('image0');...;hide('imagem-1');
}

The functions show('target') and hide('target') are simple js functions,
i.e., : document.getElementById(target).style.display = "" //(or "none")

I am unsure if the empty string is a valid value for display.
Try 'inline' for span-like elements (elements that flow with the tekst)
or use 'block' for div-like elements.

An empty string is valid.

>

>I want to change the lengthy show/hide strings. I've tried using
variations to name the appropriate containers in the function:

function xImages (n) {
for(var i=0; i <m+1; i++) { //I hard enter m+1
if (i==n) {document.form1.elements["image"+(i)].style.display="";}
else {document.form1.elements["image"+(i)].style.display='none';}
}

I get the error msg message:
Could not convert undefined or null to object
document.form1.elements[("image" + i)].style.display = "none";

I think you better start with checking what your form contains.
It strikes me that you address your images via your form...
You usually use document.images.etc to address images.
Or when they are labeled with an id, getElementById().

I'm not addressing images. I'm addressing containers <div name="image1">.

>
My advise:
- put all images you want to be able to show/hide in seperate divs, naming
the divs like this:
<div id="imgdiv0" style="display:block">
<img src="images/img0.gif">
</div>

Precisely what I'm doing.

>
Or use span if that is more appropriate.

Now address the div instead of a formelement, which it is not, like this:
var myRef = document.getElmentById("imgdiv0");
myRef.style.display = "none";
or
myRef.style.display = "block";

In case of span use 'inline' instead of 'block'.

Hope that helps,

It did, thank you.

>>
Apparently I'm not addressing the container properly, but I can't comeup
with the correct syntax. HELP! Please.

The code ended up as (which eliminated the switch statement entirely):

function xImages(n) {
for(var i=0; i <m-1; i++) {
f (i==n) {document.getElementById(["image"+(i)]).style.display = "";}
else {document.getElementById(["image"+(i)]).style.display = "none";}
}
Thanks all for the help.
--
Ed Jay (remove 'M' to respond by email)

[Dr John Stockton]

JRS: In article <0n********************************@4ax.com>, dated
Mon, 14 Aug 2006 12:01:42 remote, seen in news:comp.lang.javascript, Ed
Jay <ed***@aes-intl.composted :

>I have a switch statement that controls which of several containers is
displayed or not. It currently looks like:

function showHelp(n) {
show('vhelp'); //makes parent container visible
switch (n){
case 0:
show('image0');hide('image1');hide('image2');...;h ide('imagem');
break;
..
..
case m:
show('imagem');hide('image0');...;hide('imagem-1');
}

The functions show('target') and hide('target') are simple js functions,
i.e., : document.getElementById(target).style.display = "" //(or "none")

Presumably you mean that the above works with show & hide.

Replace the switch with
for (j=0; j<=m; j++) (j==n ? show : hide)("image"+j) ;
maybe?

if (i==n) {document.form1.elements["image"+(i)].style.display="";}
else {document.form1.elements["image"+(i)].style.display='none';}

Those can be written as
if (i==n)
{document.form1.elements["image"+i].style.display = i==n ? "" : "none"

Untested.

aside: !! i should not be used as a variable in News,
!! because a good spellchecker will complain.
It could be more elegant to save in a variable the number of what is
currently shown. Then the change routine would only need to hide that
and show the new one.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.

[Randy Webb]

Dr John Stockton said the following on 8/15/2006 1:03 PM:

<snip>

aside: !! i should not be used as a variable in News,
!! because a good spellchecker will complain.

Not if the person using it is wise enough to tell it to ignore it.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/