SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Closures

    Hi all

    jsfiddle - http://jsfiddle.net/zE4Y7/

    Demo - http://www.ttmt.org.uk/closure/

    I have two arrays, one containing phrases, one containing fonts.

    I'm using a loop to create 3 div's containing <p> tags

    In each <p> I'm placing a random phrase from the first array.

    Each <p> is then styled with the font in the second array.

    First <p> should be styled with the first font in the array, second <p> second font etc.

    My problem is all the phrases are styled with the last font in the array.

    I think I know why it's happening and I need a closure to stop it.

    I'm trying to do the closure like this but it's not working.

    Can anyone help me with closures.

    Code:
    <script>
    
      createFlags = function(){
    
        var text = ['Hello Sailor','Acid Test','Bear Garden','Botch A Job','Dark Horse','Face','IKEA','Jig'];
    
        var fonts = ['CALIBRI','CORBEL','SourceSans'];
    
        for(var i = 0; i<fonts.length; i++){
          var ranNum = Math.floor(Math.random()*text.length); 
          (function(n){
            $('#wrap').append('<div class="font"><p>'+text[ranNum]+'</p></div>').css({'font-family':fonts[n], 'font-size':'3em'});
          })(i);
        }
      
      }
    
      createFlags();
    
    </script>

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The problem is this line:
    Code JavaScript:
    $('#wrap').append('<div class="font"><p>'+text[ranNum]+'</p></div>').css({'font-family':fonts[n], 'font-size':'3em'});
    What you're doing is assigning the css styles to div#wrap, and each time the loop runs it's overwriting the values.

    You need to create your new element, assign the styles, and then append it to div#wrap:
    Code JavaScript:
    for(var i = 0; i<fonts.length; i++){
        var ranNum = Math.floor(Math.random()*text.length);
        var el = $('<div class="font"><p>'+text[ranNum]+'</p></div>').css({'font-family':fonts[i], 'font-size':'3em'});
        $('#wrap').append(el);
    }
    You don't actually need the extra function wrapped around your jQuery.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi the problem is that you are applying the font declaration to $("#wrap").

    Try this instead:

    Code JavaScript:
    for(var i = 0; i<fonts.length; i++){
      var ranNum = Math.floor(Math.random()*text.length), 
           frag = $('<div class="font"><p>'+text[ranNum]+'</p></div>');
      frag.css({'font-family':fonts[i], 'font-size':'3em'});
      $('#wrap').append(frag);
    }

    Edit: Oops, beaten to it. Nice one fretburner

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, fretburner


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •