[RESOLVED] Javascript to change CSS style on window.load

[pinkBear]

Hello -
I have a dynamic page that loads different content depending on the url parameter "id". What I would like to do is simply have javascript load the url parameter "id" via php then run through an if, else if statement and depending on which url parameter (which content the page is displaying) highlight the link text (in a ul li) as a way of reassuring the visitor that they are on the page the intended to be on. I want to do this by simply adding a backgroundColor style to the element by its id.

In this code my page loads and properly displays the document.write text. That text is only there for debugging...... The script does not, however, alter the backgroundColor of the element.

Does anyone see the error in this code that is preventing this from working?

<script type="text/javascript">

function currentGallery() {
var gallery = "<?php echo $_GET['id'] ?>";

if (gallery == 4)
{
document.write("kitchen");
document.getElementById('kitchensGallery').style.backgroundColor = "yellow";
}
else if (gallery == 3)
{
document.write("bathrooms");
document.getElementById('bathroomsGallery').style.backgroundColor = "green";
}
else if (gallery == 2)
{
document.write("beforeAfter");
document.getElementById('beforeAfterGallery').style.backgroundColor = "blue";
}

}
window.onload = currentGallery();
</script>

// ..................................... below is my ul containing the id elements that the javaScript should change the backgroundColor of.

***** DO I HAVE TO HAVE A CURRENT CSS BACKGROUND COLOR DEFINED IN ORDER TO CHANGE IT? OR CAN I GO FROM NOTHING TO SOMETHING?

<ul>
<li><a href="index.html">Home</a></li>
<li>|</li>
<li><a href="portfolio.php">Portfolio</a></li>
<li>|</li>
<li id="kitchensGallery" style="background-color: #CCFFFF"><a href="gallery.php?id=4">Kitchens</a></li>
<li>|</li>
<li id="bathroomsGallery"><a href="gallery.php?id=3">Bathrooms</a></li>
<li>|</li>
<li id="beforeAfterGallery"><a href="gallery.php?id=2">Before &amp; After</a></li>
</ul>


Thank you for reviewing this code...

Adam

[Fang]

function currentGallery() {
var gallery = <?php echo $_GET['id'] ?>; //integer not a string

if (gallery == 4)
{ // never use document.write after document has loaded
document.getElementById('kitchensGallery').style.backgroundColor = "yellow";
}
else if (gallery == 3)
{
document.getElementById('bathroomsGallery').style.backgroundColor = "green";
}
else if (gallery == 2)
{
document.getElementById('beforeAfterGallery').style.backgroundColor = "blue";
}

}
window.onload = currentGallery;

[pinkBear]

Thank you.... Ill make those changes and see if it works...

Adam

[pinkBear]

Still not working. The background color of the li is not changing when the page loads with a different url parameter.

Is it best to use an inline style? Do I need a style to exist before javascript can change it? Or, will javaScript create the style from nothing? Its a simple script.....I cant figure out why it wont work..

Thanks again for the help

Adam

[pinkBear]

SCRATCH THAT!!!! It works. Thanks for the help. I had moved the script to an external file and that must have disabled the php's ability to get the url parameter....

But, it is working.... Hot damn!!

Adam