Get elements by class name

[riptide]

I wanted to know if you could use this in a switch function

this is the class function

getElementsByClass Written By: Dustin Diaz
      http://www.dustindiaz.com/getelementsbyclass/

Slight minor modification by: Jon Christopher
      http://www.MondayByNoon.com                   */

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var elsLen = els.length;
    var pattern = new RegExp("\b"+searchClass+"\b");
    for (i = 0, j = 0; i < elsLen; i++) {
         if ( pattern.test(els[i].className) ) {
             classElements[j] = els[i];
             j++;
         }
    }
    return classElements;
}

function seasons(){
  var myEls = getElementsByClass(document,'tt1', 'a');
  for ( i=0;i<myEls.length;i++ ) {
     seasonfind=myEls[i];
     seasonfind.onclick = function()
     {
        switch(seasonfind){
case tt1:
document.getElementById("misterioProgram").style.display="block"

break
case tt2:
document.getElementById("misterioProgram").style.display="inline"

break
case tt3:
document.getElementById("misterioProgram").style.display="none"
break
}

     }
  }
}

I is the right way to use a getElementsByClass function to change the display of a div by the class of the links that were clicked

<a class="tt1" href="#">
<a class="tt2" href="#">
]<a class="tt3" href="#">

[riptide]

is this to hard to understand.

[jscheuer1]

Although it is hard to say without a link to your page, I don't think that is the correct way to use it. A proper getElementsByClassName() function would simply return an array of elements with the class attribute in question. Using it has no advantage over getElementById() unless you are trying to get more than one element at a time. To do that, you would need more than one element with a given class. Your example shows three anchor tags, each with a different class name. My advice is to switch to id and use getElementById(). It will save unnecessary complications.

[riptide]

that's just there to understand it. in the end there will be about ten of each links that will change a div from display none to block.

but I wanted to add another function to the links by onclick

<a class="tt1" href="URL" onclick="program()">

then I was going to use setAttribute("herf", movie.getAttribute("href")
to send Realplayer,Quicktime or WMP the links herf with the help of the
getElementsByClassName() function.

[jscheuer1]

I think you are confused. The getElementsByClass function doesn't work. That stuff with the \b's as used causes missed class names. Once that is fixed, your function seasons() is so unclear, I have no idea what it is trying to do.

Here is a working version of getElementsByClass function:

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var pattern = new RegExp('\\b'+searchClass+'\\b');
    for (var i = 0; i < els.length; i++)
         if ( pattern.test(els[i].className) )
             classElements[classElements.length] = els[i];
    return classElements;
}

[riptide]

ah, I knew there was something wrong with that Class function.

I'll see if I can do anything with this one then I will ask you something else.

I'm a bit confused about how you can use class functions I mean I know they work like getElementById()

but I wonder if you can use switch to check the class of the links and then do something with the links from each class.

function seasons was going through all the classes then putting them in var seasonfind. Someone on another forum told me to set it up that way.

[jscheuer1]

The getElementsByClass function will only get you one class at a time and it will be an array of all items with that class name, even if there are no items (returns an empty array) or if there happens to be only one item in that array. There is no way to act upon that data to get elements with other classes. The fundamental difference between getting elements via their class and by their id is that there can only be one element with a given id, at least for scripting purposes and, it is returned as a single object, not as an array.

The getElementsByClass function is very similar to the:

getElementsByName()

and the:

getElementsByTagName()

methods which return a collection of elements as an array or pseudo array (I'm not certain which, it behaves like an array).

Also, do not confuse any of this with javascript classes which are something else entirely and have nothing particular to do wth HTML class names - getElementsByClass is a function written to mimic the functionality of a javascript method like getElementsByName() but keying off of an element's class name.

[riptide]

no I'm not getting javascript classes and HTML classes confused.

if classElements is a variable in your script it holds the array of class names.

can't I retrieve the class like if I did something like.


if the link with the class 4 was clicked a div would change to display block and if a link with the class 3 was clicked another div would change to display block.

And I wanted to assign this to all links. Without putting onclick in the <A> tag

<a class="4">
<a class="4">
<a class="3">
<a class="3">
<a class="5">
<a class="5">

switch(classElements){
case 4:
document.getElementById("divone").style.display="block"

break
case 3:
document.getElementById("divtwo").style.display="block"

break
case 5:
document.getElementById("divthree").style.display="block"
break

or would it be something like

var thediv

switch(thediv){
case :getElementsByClassName("3"):
document.getElementById("divone").style.display="block"

break
case :getElementsByClassName("4")
document.getElementById("divtwo").style.display="block"

break
case :getElementsByClassName("5")
document.getElementById("divthree").style.display="block"
break

[jscheuer1]

You will get into trouble sooner or later using numbers as class names. Also, I think you misunderstand the switch() method. You might be better off using if(condition)/else if(condition) statements. But, if you really want to use switch(), at least have a look here:

http://www.hscripts.com/tutorials/ja...witch-case.php

The bottom line on switch is that you must have something that could have different values here:

switch(. . .)

And then, your case labels are the possible results followed by the desired action for each one. As an example of part of your problem with switch:

switch(classElements)

will never represent the numbers in your case labels, it will always be an array. In your second example, at least with the code shown:

switch(thediv)

will have no value. You also need to close your brace that you open after the switch at the end of the case labels/actions:

switch(classElements){
case 4:
document.getElementById("divone").style.display="block"

break
case 3:
document.getElementById("divtwo").style.display="block"

break
case 5:
document.getElementById("divthree").style.display="block"
break

//needs a closing brace here

[riptide]

yeah I know I didn't set it up right the first time. I know how to set up switch but with this class function I'm confused. I didn't want to use an if else statement because I think it's going to be too long and I don't need my code to get much larger

I'll have a larger div and depending on what class of links are clicked there will be a smaller div in the larger one. That's how I have my code set up anyway.

var bigDiv=document.getElementById("bigd")
switch(bigDIV)

but will I need to use appendChild if my slammer divs are already positioned over the big div but are on display block, no.

why will my last code have no value?

will I need to set it up like this?

getElementById("bigd").getElementById("divtwo").style.display="block"