CODEWITHSUNDEEP
javascripthtmlvisual-studio-2012
Asi Givati
Asi Givati

Reputation: 1475

JavaScript - create number of divs in loop

I'm a begginer with javaScript. and I want to create number of windows (div) with loop operation only with javaScript. This is my code:

var numOfWindows = 3;

var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
   arrayDiv[i] = document.createElement('div');
   arrayDiv[i].id = 'block' + i;
   arrayDiv[i].style.backgroundColor = 'green';
   arrayDiv[i].className = 'block' + i;
   document.body.appendChild(arrayDiv[i]);
}

but I see a blank screen.

Upvotes: 0

Views: 1959

Answers (2)

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

Give your div a specified width and height.

div.style.width = '10px';
div.style.heigt = '10px';

Or give it content.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

Your JavaScript works perfectly, if you give the created elements some content, or specific dimensions in CSS:

var numOfWindows = 3;

var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
    arrayDiv[i] = document.createElement('div');
    arrayDiv[i].id = 'block' + i;
    arrayDiv[i].style.backgroundColor = 'green';
    arrayDiv[i].className = 'block' + i;
    // setting the textContent to the 'i' variable:
    arrayDiv[i].textContent = i;
    document.body.appendChild(arrayDiv[i]);
}

JS Fiddle demo.

Or:

var numOfWindows = 3;

var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++) {
    arrayDiv[i] = document.createElement('div');
    arrayDiv[i].id = 'block' + i;
    arrayDiv[i].style.backgroundColor = 'green';
    arrayDiv[i].className = 'block' + i;

    // setting the class-name of the created elements:    
    arrayDiv[i].className = 'bordered';

    document.body.appendChild(arrayDiv[i]);
}

JS Fiddle demo.

Upvotes: 1

Related Questions