Close and open another div after the loop will increase by 3 each time

Question

I have an array. I'm fixated on this. First, I need it to open the div and add text to it the first time the loop starts. Then I want if the loop starts 3 times, close the previous div and open a new div.

code:

var counter = 0; for (var i = 0; i < tag_array.length; i++) { counter++; if (counter == 3) { counter = 0; document.write("</div>"); document.write("<div class='span6'>"); } else { document.write("<div class='span6'>"); } document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>"); } 

The code above does not work. I do not know why. Please explain to me what I am doing wrong, and how can I fix it?

Answer 1

when the loop starts first, it should already open the div and add text to it. Then I want if the loop starts 3 times, close the previous div and open a new div.

The reason you are doing it wrong is because else { document.write("<div class='span6'>");} calls document.write , even if the counter is 2.

So you should change it to else if(counter == 1) :

 var counter = 0; for (var i = 0; i < tag_array.length; i++) { //this line indicates that the counter will only be either 1,2,3 when it enters the if statement counter++; if(counter == 3){ counter = 0; document.write("</div>"); }else if(counter == 1){ document.write("<div class='span6'>"); } document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>"); } 

To make it more confusing, you can change the if statement to a switch statement, have counter++; in the switch statement and make the for statement in the while statement:

 var counter = 0; var i = 0; var length = tag_array.length; while (i <length) { switch(counter){ case 2: document.write("</div>"); //when counter reaches 2, set it back to 0 and leave the switch statement; counter = 0; break; case 0: document.write("<div class='span6'>"); case 1: //counter++ will only be triggered when counter is 1 or 0; counter++; } document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>"); i++; } 

Or, if you want to be more efficient, you can use the codes below. (Inspired by frenchie answer . I corrected his answer to one that works correctly. If you want to support or accept this answer because of the codes below, please, or instead. )

 var a = '<div class="span6">'; var length = tag_array.length; for (var i = 0; i < length; i++) { a += '<div class="tag">' + toTitleCase(tag_array[i]) + '</div>'; if (i % 3 == 2) { a += '</div><div class="span6">'; } } a += '</div>'; document.write(a); 

Answer 2

You opened another span and did not close it with each iteration, so you should get the first interval out of the loop.

This should work, I also added another </div> at the end of the loop

 var counter = 0; document.write("<div class='span6'>"); for (i = 0; i < tag_array.length; i++) { if (counter === 3) { counter = 0; document.write("</div>"); document.write("<div class='span6'>"); } document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>"); counter++; if (i === tag_array.length - 1) { document.write("</div>") } }