A hair puller disguised as simple CSS...

[swirlingDervish]

...or it should be simple. Newbie here, trying to apply a style to a <div> element by js. I have js buttons that change visibility on several <div>s which all seem to work fine using the exact switch function to choose the right element to reveal except for two book buttons. The syntax seems correct but neither the display nor class style is applying. Help! Here is the page link:

 

http://siddhicenter.org/Inner/Space/Store.htm

 

I know it has to be something crazy simple, right?

 

Thanks....

[Ingolme]

You have two different elements with ID "Book" so it's only modifying the first one.

[swirlingDervish]

Hi, thanks for responding. Unfortunately, it's not modifying either book button. A little history: about a two weeks ago, these buttons worked; I moved the elements around for a different placement (didn't change any CSS or code referencing) and tested, only to find it not working. I moved the elements back to their previous places, still didn't work. Switch function and CSS code for book buttons is exactly the same prior to and after the move, and the book CSS class "CDs" style is exactly the same as all the other button styles, before and after the move. Note: when using Chrome debugger, I noticed that for all buttons, the element's style class is visibly changed as per switch function when any button is clicked, except the book buttons. "CDs" class style is pulled from external sheet. I've included some of the code:

 

/* debugger results' impact on elements after received button mouse click */

 

<<<div id="Inits" class="CDs" style="display: none;">...</div>

<div id="Guidd" class="CDs" style="display: none;">...</div>

<div id="LovRel" class="CDs" style="display: block;">...</div>

<div id="Book" class="CDs";">...</div> <- NOTE

<div id="Inits" class="CDs" style="display: none;">...</div>

<div id="Inits" class="CDs" style="display: none;">...</div>

>>

 

/* the multiple choice for object visibility */

 

<< switch(chc){

case 1:

document.getElementById("Inits").style.display = "block";

document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = document.getElementById("Book").style.display = "none";

document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";

break;

case 2:

document.getElementById("Guidd").style.display = "block";

document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Book").style.display = "none";

document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";

break;

case 3:

document.getElementById("LovRel").style.display = "block";

document.getElementById("Guidd").style.display = document.getElementById("Inits").style.display = document.getElementById("Book").style.display = "none";

document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";

break;

case 4:

document.getElementById("Book").style.display = "block";

document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";

document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none";

break;

case 5:

document.getElementById("Malas").style.display = "block";

document.getElementById("Ship").style.display = document.getElementById("Book").style.display = "none";

document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none";

break;

case 6:

document.getElementById("Ship").style.display = "block";

document.getElementById("Malas").style.display = document.getElementById("Book").style.display = "none";

document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none";

break;

}

>>

 

/* ...and external CSS class */

 

.CDs {

position: absolute;

left:197px;

top:187px;

width:755px;

height:511px;

color:green;

font:12px Verdana;

text-shadow:1px 1px #0b0b0b;

z-index:5;

display:none;

}

Any thoughts...? Thanx 4 any help....

[Ingolme]

Go through your document again and make sure you don't have any duplicate IDs. When I tested your page the first element with a "Book" ID was being manipulated but not the other one which you intended to change. By changing the ID of the first book element your page should work as you intended.

[swirlingDervish]

O..M..G!..and ugh! Why is it almost always something simple?! (especially after 2 wks! ) The dupes turned up in a secondary navbar of buttons and I'd just missed them, focusing on the elements. Thanx 4 the help...and my weekly dose of debugger shame!