Closure in Javascript loop

Question

I have two arrays, one containing phrases, one containing fonts. I'm using a loop to create 3 div's containing  tags.

In each  I'm placing a random phrase from the first array. Each  is then styled with the font in the second array. First  should be styled with the first font in the array, second  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.

    <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>

It has nothing to do with closures, the font is no aplied and thus inherited from the parent div. — kirelagin
– kirelagin, Commented Jun 10, 2013 at 20:37

kirelagin · Accepted Answer · 2013-06-10 20:45:07Z

1

The problem is that .append returns not the new element, but the one that you've appened to, so you style the parent div each time. Do this:

$('<div class="font"><p>'+text[ranNum]+'</p></div>').appendTo('#wrap')

instead of

$('#wrap').append('<div class="font"><p>'+text[ranNum]+'</p></div>')

fiddle

answered Jun 10, 2013 at 20:45

kirelagin

13.7k2 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Closure in Javascript loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related