Apply Same Function To Multiple Same Classes Div

Question

When I click on the watch-later icon, the tick will appear correctly.

However, when I apply the same div format to another section, the tick will appear at the first div.

This is my HTML and JavaScript:

<div id="video1" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <input type="image" onclick="showTick()"  src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" />
    </span>
</div>

the second section only different video id

 <div id="video2" class="hovertext">
        <span class="video-txt">01:54</span>
        <span class="watch-later">
            <input type="image" onclick="showTick()"  src="images/watchlater.jpg" />
        </span>
        <span class="tick" style="display:none;">
            <input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" />
        </span>
    </div>

my javascript

 <script type="text/javascript">
   function conceal() {      
       if(document.getElementsByClassName('tick')[0].style.display =='block') {
           document.getElementsByClassName('tick')[0].style.display ='none';
       }
    }  
    function showTick(){
       if(document.getElementsByClassName('tick')[0].style.display =='none') {
           document.getElementsByClassName('tick')[0].style.display ='block';
       }
    }

    function hideTick(){
        if(document.getElementsByClassName('tick')[0].style.display =='block') {
            document.getElementsByClassName('tick')[0].style.display ='none'; 
        }
    }
</script>

It's appearing like this. When i click on the second section, the tick appear at the first section :S

[IMG]http://i59.tinypic.com/2itdgi.jpg[/IMG]

How do I change the JavaScript or the div in-line so that it won't affect any other div but yet run the same function?

Please, any help will be appreciated.

Answer 1

The problem is that you always work with the first div (index=0).

You can change your functions to accept index as parameter, like this:

<div id="video1" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <input type="image" onclick="showTick(0)"  src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <input type="image" onclick="conceal(0)" onMouseOut="hideTick(0)" src="images/tick.jpg" />
    </span>
</div>
<div id="video2" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <input type="image" onclick="showTick(1)"  src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <input type="image" onclick="conceal(1)" onMouseOut="hideTick(1)" src="images/tick.jpg" />
    </span>
</div>

And the javascript like this:

<script type="text/javascript">
    function conceal(index) {      
        if(document.getElementsByClassName('tick')[index].style.display =='block') {
            document.getElementsByClassName('tick')[index].style.display ='none';
        }
     }

     function showTick(index){
        if(document.getElementsByClassName('tick')[index].style.display =='none') {
            document.getElementsByClassName('tick')[index].style.display ='block';
        }
     }

     function hideTick(index){
         if(document.getElementsByClassName('tick')[index].style.display =='block') {
             document.getElementsByClassName('tick')[index].style.display ='none'; 
         }
     }
</script>

Better solution:

Also try to always cache DOM calls. In your case the following solution will be much better.

<script type="text/javascript">
    var ticks = document.getElementsByClassName('tick');

    function conceal(index) {      
        if(ticks [index].style.display =='block') {
            ticks [index].style.display ='none';
        }
     }

     function showTick(index){
        if(ticks [index].style.display =='none') {
            ticks [index].style.display ='block';
        }
     }

     function hideTick(index){
         if(ticks [index].style.display =='block') {
             ticks [index].style.display ='none'; 
         }
     }
</script>

UPDATE:

Here is another (better) solution. All listeners are attached dynamically in code (not in HTML markup). Also I think you can show your images using IMG tags rather than INPUT.

So here is the updated HTML markup:

<div id="video1" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <img src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <img src="images/tick.jpg" />
    </span>
</div>
<div id="video2" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <img src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <img src="images/tick.jpg" />
    </span>
</div>

And the new Javascript code:

function init() {
    var watchLaters = document.getElemenetsByClassName('watch-later');

    for(var i=0, l = watchLaters.length; i < l; i++) {
        var tick = watchLaters[i].parentNode.getElementsByClassName('tick')[0];

        watchLaters[i].onclick = tick.onmouseout = function() {
            if(tick.style.display == 'none') {
                tick.style.display = 'block';
            }
        };

        tick.onclick = function() {
            if(tick.style.display == 'block') {
                tick.style.display = 'none';
            }
        };
    }
}

init();

You can ask me, if anything is unclear.

Answer 2

document.getElementsByClassName will return array and you need to pick your desired element by passing rank or position of the element in []. for second image you need to pass 1 as array argument.

please update your code like below

function showTick(){
 if(document.getElementsByClassName('tick')[1].style.display =='none') {
      document.getElementsByClassName('tick')[1].style.display ='block';

    }

}

     function hideTick(){
 if(document.getElementsByClassName('tick')[1].style.display =='block') {
      document.getElementsByClassName('tick')[1].style.display ='none'; 


    }

same can be achieve using jquery for more dynamic evironment where number of video divs may vary. Here you need to include jquery js file and need do bind click, mouse leave events like below. For more information on jquery pls see http://jquery.com/

<html>
<head>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $('.watch-later').click(function(){
        $(this).parent().find('.tick').show();
    });

    $('.tick').click(function(){
        $(this).hide();
    });

    $('.tick').mouseleave(function(){
        $(this).hide();
    });

 });

</script>
</head><body>
<div id="video1" class="hovertext">
        <span class="video-txt">01:54</span>
        <span class="watch-later">
            <input type="image"  src="images/watchlater.jpg"/>
        </span>
        <span class="tick" style="display:none;">
            <input type="image"  src="images/tick.jpg" />
        </span>
    </div>
<div id="video2" class="hovertext">
        <span class="video-txt">01:54</span>
        <span class="watch-later">
            <input type="image"  src="images/watchlater.jpg"/>
        </span>
        <span class="tick" style="display:none;">
            <input type="image"  src="images/tick.jpg" />
        </span>
    </div>
<div id="video3" class="hovertext">
        <span class="video-txt">01:54</span>
        <span class="watch-later">
            <input type="image"   src="images/watchlater.jpg"/>
        </span>
        <span class="tick" style="display:none;">
            <input type="image"  src="images/tick.jpg" />
        </span>
    </div>
</body>
</html>