0

I've been using a flip effect which I want to use for multiple widgets, but I've been struggling with the following problem: I've used the same base HTML for the different widgets. So when I want to flip the first widget on my page, I works just fine. When I want to flip another widget, it doesn't work at all...

I noticed that the problem refers to my scripting. Because I used document.getElementById, it only recognises the first unique ID. But now I don't want to change the names of the id's in each different widget. Is their a way to rewrite my script so I can define mutiple id's in it?

HTML

<section class="widget span3">
   <!--front-->
   <div id="front" class="widget-1-2 flip">
      <div class="widget-header">
         <h2>Monthly Statistics</h2>
         <div class="btn-group pull-right">
            <button id="btn-front" class="btn"><i class="icon-cogs icon-white" alt="settings"></i></button>
            <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button>
            <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button>
         </div>
      </div>
      <div class="widget-content"><p>This is the front.</p></div>
   </div><!--/front-->

   <!--back-->
   <div id="back" class="widget-1-2 flip">
      <div class="widget-header">
         <h2>Monthly Statistics / Settings</h2>
         <div class="btn-group pull-right">
            <button id="btn-back" class="btn"><i class="icon-signal icon-white" alt="charts"></i></button>
            <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button>
            <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button>
         </div>
      </div>
      <div class="widget-content"><p>This is the back.</p></div>
   </div><!--/back-->
</section><!--/widget-1-2-->

JavaScript

<script>
   document.getElementById( 'btn-front' ).addEventListener( 'click', function( event ) {
      event.preventDefault();
      document.getElementById( 'back' ).className = 'flip flip-front';
      document.getElementById( 'front' ).className = 'flip flip-back';
   }, false );

   document.getElementById( 'back' ).addEventListener( 'click', function( event ) {
      event.preventDefault();
      document.getElementById( 'back' ).className = 'flip';
      document.getElementById( 'front' ).className = 'flip';
   }, false );
</script>

For the rotating / flip effect I use CSS. Thank in advance!

1 Answer 1

1

An element's id attribute is supposed to be a unique identifier in HTML. You're writing incorrect HTML if there is more than one id attribute with the same value on a page.

Give each separate widget a unique identifier and create a function in your JavaScript that takes the widget's id as a parameter. front, back, btn-front and btn-backshould be classes instead of ids.

Then fetch the widget with getElementById, and fetch those classes with getElementsByClassName instead. Or use querySelector.

3
  • First of all thanks for your reply. If I replace the back ID and use for example back-1, back-2, back-3, front-1, front-2, front-3, ... as unique ID's, how can I then define them in my JavaScript? Because getElementById is for only one ID and I want to define more ID's in it. (document.querySelectorAll() doesn't seem to work out for me.)
    – user2310429
    Apr 29, 2013 at 15:15
  • Don't enumerate the ids, make them classes instead. The only id you need is the unique identifier for your whole widget (section element). Then you can fetch the whole widget with getElementById, say var widget = document.getElementById("widget-foo"), and then get that widget's front and back with widget.getElementsByClassName("front")[0] for example.
    – eagleflo
    Apr 29, 2013 at 15:18
  • After you've added the id for the whole widget and changed the existing ids to classes, document.querySelector("#widget-foo .front") should work as well.
    – eagleflo
    Apr 29, 2013 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.