change table color depending on variable

[brandon079]

My site has an image at the top that randomly changes when clicked, What I'm wanting to do is to change certain table's bgcolor when clicked using a second array. I managed to get this working for the background color but thats not what im going for. I also have a style tag that changes the desired tables, the problem is that I cant seem to get the style tag to us a variable instead of a RGB color. You can view the site here.

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "qwerty/01original.jpg";
images[2] = new Image();
images[2].src = "qwerty/02wizard.jpg";
images[3] = new Image();
images[3].src = "qwerty/03pirate.jpg";
images[4] = new Image();
images[4].src = "qwerty/04stpatty.jpg";

var ccolor = new Array();
ccolor[1] = "2e9f1a";
ccolor[2] = "c17000";
ccolor[3] = "A7734A";
ccolor[4] = "2e9f1a";



function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
newcolor.bgcolor = ccolor[useRand];
//document.bgColor = ccolor[useRand];   //for testing purposes only
}
//  End -->
</script>
<style> table#newcolor {background-color: #c17000;}</style>

[jscheuer1]

This:

var ccolor = new Array();
ccolor[1] = "2e9f1a";
ccolor[2] = "c17000";
ccolor[3] = "A7734A";
ccolor[4] = "2e9f1a";

should probably be:

var ccolor = new Array();
ccolor[1] = "#2e9f1a";
ccolor[2] = "#c17000";
ccolor[3] = "#A7734A";
ccolor[4] = "#2e9f1a";

Also:

newcolor.bgcolor = ccolor[useRand];

Looks like it would only work in IE. To make it more cross browser:

if (document.getElementById)
document.getElementById('newcolor').bgcolor = ccolor[useRand];
else
newcolor.bgcolor = ccolor[useRand];

[brandon079]

this

newcolor.bgcolor = ccolor[useRand];

never worked to begin with, I was just trying it and this

if (document.getElementById)
document.getElementById('newcolor').bgcolor = ccolor[useRand];
else
newcolor.bgcolor = ccolor[useRand];

didnt seem to work
thanks for the quick response. I did change the color array,

[jscheuer1]

Oh yeah, you are not going to override a background color set using the style property background-color by assigning the new color to the bgcolor attribute, I missed that, this should do it, assuming the rest of the code is reasonably error free:

if (document.getElementById)
document.getElementById('newcolor').style.backgroundColor = ccolor[useRand];
else
newcolor.style.backgroundColor = ccolor[useRand]

[brandon079]

Thanks again, well this has gotten me as close as I have been but apparently this only works for the first table named newcolor. can this code be changed so it loops newcolor1 through newcolor40

[brandon079]

Ok I added a Loop

for (i = 0; i <= 21; i++)
{

if (document.getElementById)
document.getElementById('newcolor'+i).style.backgroundColor = ccolor[useRand];
else
newcolor.style.backgroundColor = ccolor[useRand];

}

And This seems to be working quite well, but I dont know how to do the

('newcolor'+i)

for the second half

newcolor.style.backgroundColor = ccolor[useRand];

[jscheuer1]

That is a different animal and different than one might expect, here's how:

document.all['newcolor'+i].style.backgroundColor = ccolor[useRand];

[brandon079]

thanks alot for all your help john, thishas bean a great help

[brandon079]

Final project http://r.unkill.org