document.getElementById([]) ...wildcard possible?

[Uscs]

I've got some code where the user clicks on a word and the word capitalizes or un-capitalizes (using the following code):

<SPAN ID="1A" onClick="javascript:toggle('1A');" STYLE="cursor: hand;">word1A</SPAN>
<SPAN ID="1B" onClick="javascript:toggle('1B');" STYLE="cursor: hand;">word1B</SPAN>
<SPAN ID="2A" onClick="javascript:toggle('2A');" STYLE="cursor: hand;">word2A</SPAN>
<SPAN ID="2B" onClick="javascript:toggle('2B');" STYLE="cursor: hand;">word2B</SPAN>
...
<SPAN ID="99A" onClick="javascript:toggle('99A');" STYLE="cursor: hand;">word99A</SPAN>
<SPAN ID="99B" onClick="javascript:toggle('99B');" STYLE="cursor: hand;">word99B</SPAN>

<SCRIPT>
function toggle(word) {
if(document.getElementById(word).style.textTransform!= 'capitalize') {
document.getElementById(word).style.textTransform = 'capitalize';
}
else {
document.getElementById(word).style.textTransform = 'none';
}
}
</SCRIPT>

I've also got a form "reset" button that is supposed to change of all of the CSS-capitalized words back to uncapitalized words:

<FORM><INPUT TYPE="reset" VALUE="Start Over" onClick="javascript:reset();"></FORM>
<SCRIPT>
function reset() {
document.getElementById([]).style.textTransform = 'none';
}
</SCRIPT>

What I'd like to know is how can I refer to EVERY "named" element (which happen to be SPANs) without using a loop.
OR
If a loop is necessary, how can it be done when I need to refer to ID's such as "1A" "1B" all the way up to "99A" "99B"

Any help much appreciated.

[RonPK]

Hi Uscs, welcome to WebmasterWorld.

In

onClick="javascript:toggle('99B');"

you can leave out the

javascript:

, as JavaScript is the default scripting language in browsers.

I see no other way then using a loop.

document.getElementsByTagname("span")

should contain all your spans, so maybe that is a usefull collection to loop through.

[Uscs]

Right you are, RonPK.
Just discovered that solution and it works like a charm.
(Fortunately, the only things within my SPAN elements are the things I want to have this type of control over.)
Thanks.

[MonkeeSage]

Uscs:

Give this a try:

<script type="text/javascript"> 
<!-- 
function toggle(word) { 
  var elm = document.getElementById(word); 
  if (elm.style.textTransform!= 'capitalize') { 
   elm.style.textTransform = 'capitalize'; 
  } 
  else { 
   elm.style.textTransform = 'none'; 
  } 
}  
  
var spans = ""; 
  
function rst() { 
  var j; 
  if (spans == "") { 
   spans = new Array(); 
   var tmp = document.getElementsByTagName("span"); 
   for (j = 0; j < tmp.length; j++) { 
     if ((tmp[j].id.search(/\d+A/) > -1) ¦¦ 
       (tmp[j].id.search(/\d+B/) > -1)) { 
      spans.push(tmp[j]); 
     } 
   } 
  } 
  for (j = 0; j < spans.length; j++) { 
   spans[j].style.textTransform = 'none'; 
  } 
} 
//--> 
</script> 
... 
<form> 
  <input type="button" value="Start Over"  
     onclick="rst();" /> 
</form>

Should work.

In the toggle function I made a variable called elm to make things a bit easier.

Changed the reset() function to rst() so there are no internal conflicts with Netscape / Mozilla (I think reset is a reserved function name).

Then just skip through the array of spans (tmp) and check their id attributes with the regexp search() method to see if it matches the pattern '[number]A' or '[number]B' and add the matching items to the spans array (spans); lastly hop through the spans array and set the text styling back to none.

Since the spans variable is declared in the global scope (outside of any function) I have the rst() method using a singleton pattern, which means that it only needs to get the spans array filled once -- it won't keep getting a new array each time the reset button is pressed.

HTH
Jordan

Ps. Don't forget to change the double-broken-bars (¦¦) back to double-pipes (pipe key is shift'd '\' on the keyboard) or you'll get errors.