[RESOLVED] getElementsByClass: missing the obvious?

[nursa]

i cant get this to work, what am i missing??

I'm trying to make the 'report' selection box show/hide other selection boxes using the class. (in this example i want it to hide the 'client' selecter when 'CSMR01' is selected)

In the head:

function setRep(sel) {
switch(document.getElementById("report").options[document.getElementById("report").selectedIndex].value){
case "CSMR01":
  alert ("ok");
	document.getElementsByClassName("test").style.display="none";
	break;
default:
  alert ("no");
}
}

(If someone knows a simpler method of calling the selected value, feel free to comment )


in the form:

<select name="report" id="report" onchange="setRep(this)">
<option value="">Select Report</option>
<option value="CSMR01">blah</option>
</select>

<select class="test" name="client" id="client" onchange="setBp(this)">
<option value=".|.">blah</option>
</select>

help/advice much appreciated

[nursa]

BTW- i can get it to work using getElementById, but i want to use classes to save referencing every element

[nursa]

ah - just found this:

http://www.robertnyman.com/2005/11/0...tsbyclassname/

i will persist

[Declan1991]

Elements, there is more than one possible answer.

var els = document.getElementsByClassName("test");
for (var i = 0; i < els.length; i++) {
els[i].style.display = "none";
}

[nursa]

thanks for that Declan, it works fine. I didnt realise it wasn't natively possible to hide elements by class name without using some kind of function until after i'd posted.

var i = 0; i < els.length; i++

1 question, does 'length' in this example represent the number of elements in 'els'?

[Kor]

ah - just found this:

http://www.robertnyman.com/2005/11/0...tsbyclassname/

i will persist

Use this:

function setClassMethod(){
if (!document.getElementsByClassName) {
	document.getElementsByClassName = function (cn) { 
		var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
		var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a;
			while (a = allT[i=i+1]) {
			  ac=a.className;
			  if ( ac && ac.indexOf(cn) !==-1) {
				if(ac===cn){ allCN[allCN.length] = a; continue;   }
				rx.test(ac) ? (allCN[allCN.length] = a) : 0;
			  }
			}
		return allCN;
	}
}
}
onload= setClassMethod

It is neat and comprehensive.

And, yes, "length" in Declan's example represents the number of the elements in the collection. A collection of elements is very much alike an array.

[tirna]

there are a few variations on the www.

I have this one in my default js library file and I use it by default.

function getElementsByClassName(oElm, strTagName, strClassName) {
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++)
    {
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className))
        {
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
} 

[nursa]

thanks both - some new stuff in there for me to experiment with

[Kor]

tirna:

var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);

all is an old IE token. It is useless to test it, as all the IE versions in use have implemented getElementsByTagName() method. It is redundant

Anyway, all the modern browsers (except IE till 8) have already implemented the native method getElementsByClassName(), so it sounds more logical to create a custom method, and only if the native method does not exist, instead of running a function which creates a collection each time you call it. It is faster to work with objects' prototypes then with simple functions.

So, nursa, my advice is to use the first code. It is faster

[tirna]

You're wasting my time telling me because I am not the author of that piece of code.

I got it from the www some time ago, probably from here or a url referencing that site.

Imo, if you have any concerns about the code you should be directing them to the author and not me.

I will continue to use the code as is, while it works in the browsers I support.

I don't see any point wasting my time in replacing it when I have higher priority tasks to work on

I will continue to post it in this or other forums where I post whenever I feel it is appropriate and people can choose to use which ever version they choose.

Basically, if it ain't broken I am not going to fix it.

And if there are a few nano-seconds lost in its execution I am quite happy to accept that as it is not an issue for me.

/*
	Written by Jonathan Snook, http://www.snook.ca/jonathan
	Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}

[Kor]

You're wasting my time telling me because I am not the author of that piece of code.

Neither am I the author of that piece of code. The code I have posted is, most of it, written recently by rnd_me. At least I had the wit to switch to up-to-date pieces of codes, when I see they are better

And, I didn't intend to waste your time, but to save nursa's time.

[tirna]

if you didn't intend to waste my time, then I would have thought would not have directed a section of your post to me with

tirna:

You could have expressed your opinion without any reference to me personally if you didn't want to waste my time

If you feel your version is better, I have no issue with that at all because imo any benefit that might or might not be there is miscroscopically tiny and so it is of no consequence to me at all which version you or other people use.

I just post that version as another option.

[Kor]

You talk too much. The thread is resolved.