Javascript function on multiple elements at one page?

Question

Could you please help me to figure out this situation? On my page I'm using Javascript which dynamically generates random RGB color, which is being applied to multiple elements on the page.

Here is Javascript itself:

function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+10)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
if (theValue == true || theValue == false)
eval("obj."+theProp+"="+theValue);
else eval("obj."+theProp+"='"+theValue+"'");
}
}

// get random RGB values so we can change background and link colors
var r = Math.floor(Math.random()*241);
var g = Math.floor(Math.random()*241);
var b = Math.floor(Math.random()*241);

// variables to hold the lighter shade RGB values
var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3;

//we'll use these values to calculate lighter shades
var p1 = .1;
var p2 = .15;
var p3 = .2;

getLighterRGBShades();

// get random intervals used to calculate the changing RGB values
var ri = Math.floor(Math.random()*4);
var gi = Math.floor(Math.random()*4);
var bi = Math.floor(Math.random()*4);

// This changes the color
function randomcolor() {
if (r>239||r<1) ri=ri*-1;
if (g>239||g<1) gi=gi*-1;
if (b>239||b<1) bi=bi*-1;
r+=ri;
g+=gi;
b+=bi;
MM_changeProp('random','','style.color','rgb('+r+', '+g+', '+b+')');

getLighterRGBShades();

setTimeout('randomcolor()',100);
}

function getLighterRGBShades() {
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

Everything works fine, but the problem is that I can't use one function (in this case called randomcolor()) for several times on my page (applying objName as Id in HTML for different elements). In HTML this will look as follows:

<html>
<head>
</head>
<body onLoad="randomcolor()>
...
<a href="#1" id="random">Link#1</a>
...
<a href="#2" id="random">Link#2</a>
...
<a href="#3" id="random">Link#3</a>
...
</body>
</html>

It will work fine only for for the first element from the top, in this case Link#1, but not for the following ones. Any ideas?

eval and document.layers? Are you serious? Did we suddenly go back into 1995? — Matti Virkkunen
– Matti Virkkunen, Commented Apr 24, 2011 at 21:11

herostwist · Accepted Answer · 2011-04-24 21:10:09Z

1

id is unique; you cant have several elements with the id random. use class instead.

answered Apr 24, 2011 at 21:10

herostwist

3,9781 gold badge30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user722941 Over a year ago

Thank you for the answer! That probably should be one of the reasons! But, I've just tried to do this and unfortunately when when using class instead of id script won't work at all. Maybe solution is somewhere in Javascript itself?

herostwist Over a year ago

yes, you need to change the script as it is still using getElementById. I sugest you look into jQuery where you could replace the whole crappy macromedia MM_findObj with simply $('.random')

J.S. Taylor · Accepted Answer · 2011-04-25 03:02:54Z

var arrays = document.body.getElementsByTagName('A');
for(var i = 0; i < arrays.length; i ++) {
    var elem = arrays[i];
    if(elem.id == 'random') {
        elem.style.color = 'rgb('+r+', '+g+', '+b+')';
    }
}

Please replace 'MM_changeProp('random','','style.color','rgb('+r+', '+g+', '+b+')'); ' with those scripts above.

Duplicated id is bad pratical. Better using class instead of id. Importing a js selector library such as jQuery is highly recommended. Then you can write just one line:

$('.random').css('color', 'rgb('+r+', '+g+', '+b+')');

Collectives™ on Stack Overflow

Javascript function on multiple elements at one page?

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related