Put a line break in a for loop that is generating html content

Question

I have a for loop that is generating some HTML content:

var boxes = "";

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
}

document.getElementById("id").innerHTML = boxes;

I want to display 3 boxes in one row, then below them 2 boxes in one row, then 1, then 3 again, 2, and 1.

First i thought of using the if statement to check whether i > 2 to add a line break, but it will also add a line break after every box past the third one. Nothing comes to mind, and my basic knowledge of javascript tells me I'll have to make a loop for each row I want to make. Any advice?

Answer 1

I would use a different approch :

Use a array to store the number of item per row :

var array = [3, 2, 1, 3, 2];

Then, using two loops to iterate this

for(var i = 0; i < array.length; i++){
    //Start the row 
    for(var j = 0; j < array[i]; ++j){
        //create the item inline
    }
    //End the row 
}

And you have a pretty system that will be dynamic if you load/update the array.

PS : not write javascript in a while, might be some syntax error

Edit :

To generate an id, this would be simple.

create a variable that will be used as a counter.

var counter = 0;

On each creating of an item, set the id like

var id = 'boxes_inline_' + counter++;

And add this value to the item you are generating.

Note : This is a small part of the algorithm I used to build a form generator. Of course the array contained much more values (properties). But this gave a really nice solution to build form depending on JSON

Answer 2

var boxes = "",
    boxesInRow = 3,
    count = 0;

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
    count++;
    if(count === boxesInRow) {
       boxes += "<br/>";
       boxesInRow -= 1;
       count = 0;
       if (boxesInRow === 0) {
           boxesInRow = 3;
       }
   }
}

document.getElementById("id").innerHTML = boxes;

Answer 3

You can try something like this:

Idea

• Keep an array of batch size
• Loop over array and check if iterator is at par with position
• If yes, update position and index to fetch next position

 var boxes = ""; var intervals = [3, 2, 1]; var position = intervals[0]; var index = 0; for (i = 0; i < 11; i++) { boxes += "<div class=\\"box\\"><img src=\\"unlkd.png\\"/></div>"; if ((position-1) === i) { boxes += "<br/>"; index = (index + 1) % intervals.length; position += intervals[index] } } document.getElementById("content").innerHTML = boxes; 

 .box{ display: inline-block; } 

 <div id="content"></div> 

Answer 4

 var i;
    var boxes = "";
    for (i = 0; i < boxes.length; i++) {
        boxes += "<div class=""><img src=""/></div>";
        function displayboxes() {
        "use strict";
        for (i = 0; i < boxes.length; i++) {
            out.appendChild(document.createTextNode(boxes[i] + "<br>"));
        }
    }
        displayboxes(boxes);