Trying to change background color of a series of links

[thesoundsmith]

i have a list of sequential page links that pull JPGs into a page. I would like the background colors of the current, orevious and next pages to change programattically. There are two ways to change display - click on the lonk or use the prev next buttons. Everything works but the color change, nothing I have tried does anything at all. The test page is at http://www.thesoundsmith.com/hmd2CLR.htm and the relevant code looks like this:

    sdArr[18] = 'wavs/b3/b3__pg19.mp3'; // more array variables above    sdArr[19] = 'wavs/b3/b3__pg20.mp3';    //  global variables    var hiddenArrayIndex = 0;    var myIndex = 0;    var PageNum = 1;    var thisID = 'pg';    var prevPg = 0; // prev page link color    var nxtPg = 2;  // next page link color    var lastPg = 0; // last SELECTED page    var MyNxtClr = '#006600';	 //Pgnxt color    var MyPrvClr = '#7E009E';	 // PgPrev color    var ThisClr = '#B25900';	   // a dark orange bg    var bgClr = '$070707';	    //regular bg color    var oldPg = 'pg0';		   // old page label to rest bg color     function showThis(indexNum){	    var newIndex = indexNum;	    myIndex = indexNum;	   prevPg =  ((myIndex+19) % 20);	   nxtPg = ((myIndex+1) % 20);	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not equal to the upper index of the array	    // then increment the value by 1 and store it back into the hidden field	    if(hiddenArrayIndex != newIndex) {		    document.getElementById('hiddenValue').value = newIndex;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";	    thisID = 'pg'.concat(hiddenArrayIndex.toString());	  if (thisID.length > 0) {		    soundManager.destroySound(thisID);	   };	    soundManager.stopAll();	    soundManager.play(thisID,sdArr[hiddenArrayIndex]);	    PageNum = "Pg: "+(parseInt(hiddenArrayIndex)+1);	    document.getElementById("pgNum").innerHTML=PageNum;//	   alert (thisID);	    document.getElementByID('p5').style.backgroundColor = myPrvClr;	    document.getElementByTagName('p6').style.backgroundColor = ThisClr;	    document.getElementByName('p7').style.backgroundColor = myNxtClr;	   oldPg =  thisID    }

and is called by either:

	    <a id="prev" href="#book" onclick="showThis((myIndex+19) % 20)"><span class="prevv">Previous</span></a>		 <a id="pgNum" href="#book"></a>	    <a id="next" href="#book" onclick="showThis((myIndex+1) % 20)"><span class="nxtt">Next</span></a>    <input type="hidden" id="hiddenValue" value="0" />    <br />

to moe to the next page or

   <ul class="sidemenu">    <li id="p0"><a href="#book" onclick ="showThis(0);">1-Original Standard Registrations</a></li>    <li id="p1"><a href="#book" onclick ="showThis(1);">2-Drawbar Description</a></li>    <li id="p2"><a href="#book" onclick ="showThis(2);">3-Blending Tone Colors</a></li>..etc.

I tried 3 variations here, none show any change, I don't appear to be addressing the correct tag. I tried putting the id into the <a> element, no difference. How can I get the background color to update? Any suggestions much appreciated.

[justsomeguy]

document.getElementByID('p' + prevPg).style.backgroundColor = myPrvClr; document.getElementByTagName('p' + newIndex).style.backgroundColor = ThisClr; document.getElementByName('p' + nxtPg).style.backgroundColor = myNxtClr; If you have the indexes of the current, previous, and next pages then you can use those to target the appropriate elements. But before you do that, I would add a loop to run through all links and set the background color of all of them to the default, then change the ones that need changing. Otherwise they won't go back to the default when they should no longer be highlighted. You can also keep track of which three are currently highlighted if you want to only change those back, but it's just as easy to change all of them back before highlighting the three.

[thesoundsmith]

Thanks, justsomeguy. That was my plan, to simply track the last selected rather than loop, but I first am just trying to get the color change to work. I implemented getElementByID (and tried the others, as well). I reset the last-viewed page back to the original colo as well, and the oldPg variable has its correct value; but there is still no change to the background. Sorry, what am I missing? It all parses, but does not perform.

    var hiddenArrayIndex = 0;    var myIndex = 0;    var PageNum = 1;    var thisID = 'pg';    var prevPg = 0; // prev page link color    var nxtPg = 2;  // next page link color    var lastPg = 0; // last SELECTED page    var MyNxtClr = '#006600';	 //Pgnxt color    var MyPrvClr = '#7E009E';	 // PgPrev color    var ThisClr = '#B25900';	   // a dark orange bg    var bgClr = '$070707';	    //regular bg color    var oldPg = 'pg0';		   // old page label to rest bg color    function showThis(indexNum){	    var newIndex = indexNum;	    myIndex = indexNum;	   prevPg =  ((myIndex+19) % 20);	   nxtPg = ((myIndex+1) % 20);	    // get the value stored in the hidden field	    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    // if the value is not equal to the upper index of the array	    // then increment the value by 1 and store it back into the hidden field	    if(hiddenArrayIndex != newIndex) {		    document.getElementById('hiddenValue').value = newIndex;		    // re-assign the value to the hiddenArrayIndex variable		    hiddenArrayIndex = document.getElementById('hiddenValue').value;	    }	    // set the background-image stored at the specified Array Index dynamically	    document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";	    thisID = 'pg'.concat(hiddenArrayIndex.toString());	  if (thisID.length > 0) {		    soundManager.destroySound(thisID);	   };	    soundManager.stopAll();	    soundManager.play(thisID,sdArr[hiddenArrayIndex]);	    PageNum = "Pg: "+(parseInt(hiddenArrayIndex)+1);	    document.getElementById("pgNum").innerHTML=PageNum;//	   alert (oldPg); // returns correct page    document.getElementByID(oldPg).style.backgroundColor = bgClr;  //change to original background    oldPg = thisID;  // save current page value    document.getElementByID('p' + prevPg).style.backgroundColor = myPrvClr;    document.getElementByID(thisID).style.backgroundColor = ThisClr;    document.getElementByID('p' + nxtPg).style.backgroundColor = myNxtClr;    }

[justsomeguy]

Chrome shows an error there, it looks like you capitalized the D: document.getElementByID(oldPg).style.backgroundColor = bgClr; Also, your definition for bgClr has a dollar sign in front instead of a pound sign.

[thesoundsmith]

Aha. Thanks. Found a couple others as well, I think of ID as double capped... Got it all working now, thank you.

[thesoundsmith]

The page now WORKS perfectly, but I get w3c errors, it doesn't like my loop.

    for (var i=0; i<20; i++)	  {  document.getElementById('p'+i).style.backgroundColor = bgClr;  }    if (prevPg<19)	  { document.getElementById('p'+prevPg).style.backgroundColor = myPrvClr;   }    if (nxtPg>0)

w3c checker wants <, which will not compute. It doesn;yt like "<", but it's fine with ">"It recommends checking for unclosed quotes, but I don't see anything wrong.The whole page, again, is at http://www.thesoundsmith.com/hmd2CLR.htm

[justsomeguy]

It's because your page is using the XHTML doctype. If it was HTML5 then it wouldn't matter, but XHTML needs to be valid XML in addition to valid HTML. Since it needs to be valid XML, then you need to wrap Javascript code in a comment block to signify that it is text and not XML code, or move the Javascript code into an external file and then link to the file. http://www.google.co...channel=suggest

[thesoundsmith]

Thanks. And for the link as well.Useful vinfo, much appreciated. I keep thinking I'm done, but then there's "one more thing" I want to do, and... Do I need the education.