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>