getelementbyid for group? [Resolved]

Do I have to specify a different ID for each item... or can I do something with a group of items?

For example, I have a group of textboxes that need to be visible or invisible on the click of a button. If I give them all the same ID, why won't it perform the action on all of those items?

By the SGML, HTML and XML standards, giving more than one element the same ID is highly invalid.

I suggest you give the textboxes an ID pattern (e.g. txtbox1, txtbox2, ...) and use a short loop to make all of them invisible:

Code:

---

var o, i;
for(i = 1; (o = document.getElementById("txtbox"+i)) != null; ++i) {
  o.style.visibility = "hidden";
}

---

As long as there are no gaps, this will run through all the textboxes that use the same pattern.

if the pattern starts at 1, then I think you'll want to starts off with i = 0, not i = 1. I might be wrong, just try it out.

If you need more than one element with the same id, use classes then.

http://www.webmasterworld.com/forum91/1729.htm

Look at the bottom, there's a unofficial getElementByClass function.

I need to log in (which I can't) to see the post. Using unofficial functions isn't very good though, it's quite likely not to work in all real browsers.

Could you either paste the post from the other forum into here or could you yourself give a brief description.

Edit: never mind. I found the same post on google and it didn't ask me to log in.

Here's the post which I think you were talking about. It's quite useful, but I prefer CB's method, this can be used other times though.

Quote:

---

In the process of developing a web based application UI I had to devise a method that would allow us to manipulate objects of a certain class. I didn't want to be constrained by using the ID, as I wanted flexibility in the system. I didn't want to have to worry about what objects were on the which page for the script to know about.

Unfortunately, there is no getelementbyclass, so I wrote one myself. For anyone interested here it is for you to use and abuse:


//Create an array
var allPageTags = new Array();

function doSomethingWithClasses(theClass) {
//Populate the array with all the page tags
var allPageTags=document.getElementsByTagName("*");
//Cycle through the tags using a for loop
for (i=0; i<allPageTags.length; i++) {
//Pick out the tags with our class name
if (allPageTags[i].className==theClass) {
//Manipulate this in whatever way you want
allPageTags[i].style.display='none';
}
}
}

The advatage for me was that I didn't need to worry about whether an ID was on a page or not. Scripts that manipulate elements usually work on the basis of the ID. If the ID is not part of the DOM (not on the page) the script will throw an error. Using a class name will manipulate every object which is of that class and as developers we don't need to worry about the presence of the ID or not.

I look forward to all comments and criticisms... But mainly the comments!

---

Thanks guys... that's perfect as usual.