PDA

View Full Version : getElementsByClass function problems



riptide
Mar 26th, 2007, 09:09 PM
this is a getElementsByClass that other people seems to say works.

but I'm not sure if I'm using it right.

by Dustin Diaz & Jon Christopher

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;
}


This is my use of the function


function seasons(){

var myEls = getElementsByClass(document,'tt1', 'a');
for ( i=0;i<myEls.length;i++ ) {
seasonfind=myEls[i];

seasonfind.onclick=document.getElementById("misterioProgram").style.display="block"
}

when ever I click on the links that are inside of <li> tags with the class of tt1 they won't change misterioProgram from none to block.

_Aerospace_Eng_
Mar 26th, 2007, 10:28 PM
Because you aren't setting up the onclick properly. Try this

seasonfind.onclick = function()
{
document.getElementById("misterioProgram").style.display="block"
}

riptide
Mar 27th, 2007, 08:39 PM
I tried moving things around a bit. There's no error now, but it still wont work






function seasons(){

var myEls = getElementsByClass(document,'tt1', 'a');
for ( i=0;i<myEls.length;i++ ) {
seasonfind=myEls[i];}

seasonfind.onclick = seasons()
{

document.getElementById("misterioProgram").style.display="block"
}
}

glenngv
Mar 27th, 2007, 09:50 PM
Change this:

seasonfind.onclick = seasons()
{

document.getElementById("misterioProgram").style.display="block"
}
to:

seasonfind.onclick = function()
{

document.getElementById("misterioProgram").style.display="block"
}

riptide
Mar 29th, 2007, 05:09 PM
function seasons(){

var myEls = getElementsByClass(document,'tt1', 'a');
for ( i=0;i<myEls.length;i++ ) {
seasonfind=myEls[i];}}



seasonfind.onclick = function()
{

document.getElementById("misterioProgram").style.display="block"
}

It still does not work and it's messing up my other functions. :confused:

marilynn.fowler
Mar 29th, 2007, 08:37 PM
This thread might help:
http://www.codingforums.com/showthread.php?t=109368

Kor
Mar 29th, 2007, 10:20 PM
function seasons(){

var myEls = getElementsByClass(document,'tt1', 'a');
for ( i=0;i<myEls.length;i++ ) {
seasonfind=myEls[i];}}



seasonfind.onclick = function()
{

document.getElementById("misterioProgram").style.display="block"
}

It still does not work and it's messing up my other functions. :confused:

I still does not work what? On which browser? Which element has the id='misterioProgram'? A table? (case in which the code woun't work for Mozilla)

glenngv
Mar 30th, 2007, 05:46 PM
You set the onclick handler outside the for-loop. Put it inside the loop.

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

riptide
Mar 30th, 2007, 08:14 PM
I still does not work what? On which browser? Which element has the id='misterioProgram'? A table? (case in which the code woun't work for Mozilla)

I'm using IE 6 and misterioProgram is a Div. But I have a lot of other functions on the page.

glenngv
The function isn't working but it's not causing an error. however it is messing with one or more of the functions on the page


var c7t=70;
var v7is=0;

function show7(){
document.getElementById('sectab7').style.left=c7t+'px';
c7t++;
if (c7t==80)
document.getElementById('sectab7').style.display='block';
if (c7t<170)
setTimeout('show7()',10);
}

function clap7(){
setTimeout('hide7()',5000);
}

function hide7(){
if (v7is==1)
return;
else{
document.getElementById('sectab7').style.display='none';
v7is=0;
c7t=70;
}
}

and or





function misterio(){ document.getElementById("misterioProgram").style.display="block"}


but I removed this function and still tested it.

Ultragames
Mar 31st, 2007, 05:49 AM
Do what glenngv said, or post all of your javascript so we can help you look for a rouge }

riptide
Mar 31st, 2007, 05:50 PM
....
fine I'll post it all

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;
}


code for my moving navi

/*start sectab*/
var ct=70;
var vis=0;

function show(){
document.getElementById('sectab').style.left=ct+'px';
ct++;
if (ct==80)
document.getElementById('sectab').style.display='block';
if (ct<170)
setTimeout('show()',10);
}

function clap(){
setTimeout('hide()',5000);
}

function hide(){
if (vis==1)
return;
else{
document.getElementById('sectab').style.display='none';
vis=0;
ct=70;
}
}
/* end of sectab*/


/*sectab2*/

var c2t=70;
var v2is=0;

function show2(){
document.getElementById('sectab2').style.left=c2t+'px';
c2t++;
if (c2t==80)
document.getElementById('sectab2').style.display='block';
if (c2t<170)
setTimeout('show2()',10);
}

function clap2(){
setTimeout('hide2()',5000);
}

function hide2(){
if (v2is==1)
return;
else{
document.getElementById('sectab2').style.display='none';
v2is=0;
c2t=70;
}
}
/*end sectab 2*/



/*secab3*/

var c3t=70;
var v3is=0;

function show3(){
document.getElementById('sectab3').style.left=c3t+'px';
c3t++;
if (c3t==80)
document.getElementById('sectab3').style.display='block';
if (c3t<170)
setTimeout('show3()',10);
}

function clap3(){
setTimeout('hide3()',5000);
}

function hide3(){
if (v3is==1)
return;
else{
document.getElementById('sectab3').style.display='none';
v3is=0;
c3t=70;
}
}
/*end sectab3*/



/*secatb 4*/
var c4t=70;
var v4is=0;

function show4(){
document.getElementById('sectab4').style.left=c4t+'px';
c4t++;
if (c4t==80)
document.getElementById('sectab4').style.display='block';
if (c4t<170)
setTimeout('show4()',10);
}

function clap4(){
setTimeout('hide4()',5000);
}

function hide4(){
if (v4is==1)
return;
else{
document.getElementById('sectab4').style.display='none';
v4is=0;
c4t=70;
}
}
/*end of sectab4*/


/*sectab5*/
var c5t=70;
var v5is=0;

function show5(){
document.getElementById('sectab5').style.left=c5t+'px';
c5t++;
if (c5t==80)
document.getElementById('sectab5').style.display='block';
if (c5t<170)
setTimeout('show5()',10);
}

function clap5(){
setTimeout('hide5()',5000);
}

function hide5(){
if (v5is==1)
return;
else{
document.getElementById('sectab5').style.display='none';
v5is=0;
c5t=70;
}
}

/*end of sectab5*/


/*sectab6*/

var c6t=70;
var v6is=0;

function show6(){
document.getElementById('sectab6').style.left=c6t+'px';
c6t++;
if (c6t==80)
document.getElementById('sectab6').style.display='block';
if (c6t<170)
setTimeout('show6()',10);
}

function clap6(){
setTimeout('hide6()',5000);
}

function hide6(){
if (v6is==1)
return;
else{
document.getElementById('sectab6').style.display='none';
v6is=0;
c6t=70;
}
}

/*end of sectab6*/


/*sectab7*/
var c7t=70;
var v7is=0;

function show7(){
document.getElementById('sectab7').style.left=c7t+'px';
c7t++;
if (c7t==80)
document.getElementById('sectab7').style.display='block';
if (c7t<170)
setTimeout('show7()',10);
}

function clap7(){
setTimeout('hide7()',5000);
}

function hide7(){
if (v7is==1)
return;
else{
document.getElementById('sectab7').style.display='none';
v7is=0;
c7t=70;
}
}
/*end of sectab7 end of all sectabs*/

the function calling the get by class name thingy


function misterio(){ document.getElementById("misterioProgram").style.display="block"}

/*not working*/

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

the HTML

<li><a class="tt1" href="#" onclick="">the classes </a></li>

iLLin
Mar 31st, 2007, 06:26 PM
How are you calling the function seasons?

riptide
Mar 31st, 2007, 06:43 PM
I thought it was assigning it self to the links with the tt1 class so when you click on any tt1 link the function is called and changes misterio.

This is a test because, when I'm done one class of links will call one thing and another will call something else.

iLLin
Mar 31st, 2007, 07:07 PM
How can a function assign itself? You need to call it some how, or am I missing something?

riptide
Mar 31st, 2007, 07:54 PM
yeah I guess that's not smart. but I want the link to call more than one function depending on it's class and I thought a getElementsByClassName function would work best.

but the function can't call it's self....

riptide
Apr 6th, 2007, 09:11 PM
wait, on another forum some one told me that my script can't be set up that way.

glenngv
Apr 6th, 2007, 10:07 PM
Are you calling the seasons function onload?