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