Why are my DIVs not responding to my Javascript opacity function?

Question

I've created a very simple javascript function where as I hover over certain words, elements with a certain id become transparent. This is working fine with my img tags, but divs with the same id are not changing?

Here is my javascript:

function revealCategory1() { document.getElementById('c2').style.opacity="0.3"; document.getElementById('c3').style.opacity="0.3"; document.getElementById('c4').style.opacity="0.3"; } function revealCategory2() { document.getElementById('c1').style.opacity="0.3"; document.getElementById('c3').style.opacity="0.3"; document.getElementById('c4').style.opacity="0.3"; } function revealCategory3() { document.getElem..............etc function resetReveal() { document.getElementById('c1').style.opacity="1"; document.getElementById('c2').style.opacity="1"; document.getElementById('c3').style.opacity="1"; document.getElementById('c4').style.opacity="1"; }

http://jsfiddle.net/u6XG2/

Which is being called by this html:

<div class="bars"> <span class="categories" id="c1" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span> <span class="categories" id="c2" onMouseOver="revealCategory2()" onMouseOut="resetReveal()">ANIMATION</span> <span class="categories" id="c3" onMouseOver="revealCategory3()" onMouseOut="resetReveal()">DESIGN</span> <span class="categories" id="c4" onMouseOver="revealCategory4()" onMouseOut="resetReveal()">WEB-DESIGN</span> </div>

On the page, this is working absolutely fine. The images go transparent.

<div class="logocontainer" > <img class="logo" id="c1" src="images/DOSED-C1.png" /> <img class="logo" id="c2" src="images/DOSED-C2.png" /> <img class="logo" id="c3" src="images/DOSED-C3.png" /> <img class="logo" id="c4" src="images/DOSED-C4.png" /> </div>

But this is NOT, the divs don't go transparent.

<div class="maincontent"> <div id="c1" class="content" >VIDEO PIECE 1</div> <div id="c2" class="content" >ANIMATION PIECE 1</div> <div id="c3" class="content" >DESIGN PIECE 1</div> <div id="c4" class="content" >WEB-DESIGN PIECE 1</div> </div>

You don't have duplicate (triplicate?) IDs in your page, do you? — isherwood
– isherwood, Commented Mar 28, 2013 at 2:40

Samuel Liew · Accepted Answer · 2013-03-28 02:40:03Z

You cannot have two (or more) elements with the same ID.

Have the images IDs named differently. i.e.:

<img class="logo" id="c1_image" src="images/DOSED-C1.png" />

Then, perform actions on both IDs:

function resetReveal() { document.getElementById('c1').style.opacity="1"; document.getElementById('c1_image').style.opacity="1";

Also, remove those IDs from the <spans> in your .bars element. They don't do anything at the moment.

<span class="categories" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span>

Mark Giblin · Accepted Answer · 2014-01-27 22:36:08Z

Sorry to say it but it is a pretty common mistake but All ID's have to be unique. Its the name tag that can be duplicated.

An alternative idea would be to use a class element and the document.getElementsByClassName method and then spool through the array thats returned picking out those elements you want, thats a good one for elements that don't allow the name tag.

Collectives™ on Stack Overflow

Why are my DIVs not responding to my Javascript opacity function?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related