[RESOLVED] Making Javascript play nice with ColdFusion?

So, I have a page that loads via a link from various parts of a website. This page has two div containers on it, one div houses several other divs which simulate buttons, and the other div is simply a large image. Depending on where it loads, two variables are passed through the url, room and activebutton. activebutton changes the color of one of those buttons (to make it look ‘active’) and room changes the image displayed in the other div.

This works fine, but heres where I run into my problem. I’m not sure how to get this to play with the Javascript code. After the page loads, you can also click on any of the buttons and it should light up and the other button should return to a normal color. The image on the right should also change depending on which button you click.

I’ve been trying multiple approaches here and I’ve managed to get the image to change somewhat, but not reliably, and I haven’t even tried adding the fadein/out of the images I need. The relevant code for the buttons:

[quote]

function resetcolors()
{
document.getElementById(‘portecocherediv’).style.color=”#5F9FB3″;
document.getElementById(‘receptiondiv’).style.color=”#5F9FB3″;
document.getElementById(‘conferencediv’).style.color=”#5F9FB3″;
document.getElementById(‘ballroomdiv’).style.color=”#5F9FB3″;
document.getElementById(‘prefunctiondiv’).style.color=”#5F9FB3″;
document.getElementById(‘gardenvilladiv’).style.color=”#5F9FB3″;
}

<div class=”linkcontainer” id=”receptiondiv” onclick=”resetcolors()” >
Reception Area
</div>
[/quote]

^ Theres one of those for each of the divs.

I’m able to toggle all of the buttons back to their normal color when you click on any of them. For some reason this won’t work when I use and of the other getElement(s) commands, I had to enter in each div by ID for it to work. And no matter what I put in that function or inline, I’m not able to get the button that was clicked to change to its ‘active’ color of #FFF.

The corresponding ColdFusion code, if anyone needs it, is:

[quote]

#fp_r1_c2 {
background-image:url(‘images/<cfoutput>#room#</cfoutput>’);
width:599px;
height:577px;
float:left;
}

#<cfoutput>#activebutton#</cfoutput>
{
color:#FFF;
}

[/quote]

I’m starting to think using classes for my changes instead may make it easier to tie everything together? Upon searching I found [url]http://www.webdeveloper.com/forum/showpost.php?p=1104480&postcount=2[/url] posted by tirna which is a very helpful step in the right direction, but still doesn’t solve the problem of getting my JS to play with the CF code.

Can anyone point me in the right direction? I need a fresh perspective at this point, my mind is completely fried from trying to get this to work. Thanks in advance!

Also in #JavaScript _↴