View Full Version : Page name based ClassName change not applying on elements

05-15-2006, 03:33 PM
Alright so I'm reducing the overhead we have for maintaining pages on our designers while trying to keep everything css happy. I'm applying a classname to the ID'ed table cells based on the page name. Everything's hunky dory with getting the info out of the PathName that I need, but for some reason the class's arent applying. I'm sure it's something small and stupid, but now it's just bugging me ;)

Any help is appreciated!

(This is for a golf site if you can't guess by the var names.)

<script language="javascript" type="text/javascript">
// Get the current page as a string from the path
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

// Assume hole_xx.html as page name
var sHole = sPage.substr(5,2);

document.getElementByID("hole"+sHole).className = 'thishole';
document.getElementByID("yards"+sHole).className = 'thishole';
document.getElementByID("par"+sHole).className = 'thishole';

.thishole { background-color: red; }

<body id="news">

<table id="coursecard">
<td colspan="10">Click hole numbers to navigate</td>
<th id="hole01"><a href="hole_01.html">1</a></th><th id="hole02"><a href="hole_02.html">2</a></th>
<th id="hole03"><a href="hole_03.html">3</a></th><th id="hole04"><a href="hole_04.html">4</a></th>
<th id="hole05"><a href="hole_05.html">5</a></th><th id="hole06"><a href="hole_06.html">6</a></th>
<th id="hole07"><a href="hole_07.html">7</a></th><th id="hole08"><a href="hole_08.html">8</a></th>
<th id="hole09"><a href="hole_09.html">9</a></th><th>OUT</th>
<td id="yards01">451</td><td id="yards02">418</td>
<td id="yards03">592</td><td id="yards04">206</td>
<td id="yards05">592</td><td id="yards06">411</td>
<td id="yards07">462</td><td id="yards08">192</td>
<td id="yards09">436</td><td>3760</td>
<td id="par01">4</td><td id="par02">4</td>
<td id="par03">5</td><td id="par04">3</td>
<td id="par05">5</td><td id="par06">4</td>
<td id="par07">4</td><td id="par08">3</td>
<td id="par09">4</td><td>36</td>
<th id="hole10"><a href="hole_10.html">10</a></th><th id="hole11"><a href="hole_11.html">11</a></th>
<th id="hole12"><a href="hole_12.html">12</a></th><th id="hole13"><a href="hole_13.html">13</a></th>
<th id="hole14"><a href="hole_14.html">14</a></th><th id="hole15"><a href="hole_15.html">15</a></th>
<th id="hole16"><a href="hole_16.html">16</a></th><th id="hole17"><a href="hole_17.html">17</a></th>
<th id="hole18"><a href="hole_18.html">18</a></th><th>OUT</th>
<td id="yards10">402</td><td id="yards11">465</td>
<td id="yards12">471</td><td id="yards13">171</td>
<td id="yards14">457</td><td id="yards15">472</td>
<td id="yards16">538</td><td id="yards17">196</td>
<td id="yards18">480</td><td>3652</td>
<td id="par10">4</td><td id="par11">4</td>
<td id="par12">4</td><td id="par13">3</td>
<td id="par14">4</td><td id="par15">4</td>
<td id="par16">5</td><td id="par17">3</td>
<td id="par18">4</td><td>35</td>


05-15-2006, 04:26 PM
I should have noted that I actually moved the JS down to below the table, I was just copying and pasting quickly and stuck it all together in an order that was easier to read on here ;)

05-15-2006, 05:43 PM
nevermind. I just realized I had the caps wrong in the getElementByI_D_ :P