Close and open another div after the loop increments by 3 every time

Question

I have an array. I am looping over that. First what I need is that when the loop is run first it should already open up a div and add text to it. Next I want that if a loop has run 3 times then 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 above code is not working. I don't know why. Please explain me what I am doing wrong and how can I fix it?

Answer 1

when the loop is run first it should already open up a div and add text to it. Next I want that if a loop has run 3 times then close the previous div and open a new div.

The reason why you are doing it wrong is because else { document.write("<div class='span6'>");} will cause document.write even when 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 look less confusing you can change the if statement to a switch statement, have counter++; in the switch statement and make the for statement into a 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's answer. I corrected his answer to one that works properly.If you want to upvote or accept this answer because of the codes below, please upvote or accept his 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 were opening another span and not closing it with every iteration, so you should take the first span 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>")
    }
}