Creating div element with a for Loop

javascript html arrays

11,536

The way you are creating the array is incorrect.

Try this instead:

var count = ['1', '2', '3', '4'];

Note: Inside the for loop, you are creating elements that have the same ID. IDs should be unique.

Also, as mentioned you will want to append to the 'items' div instead of adding a new div with a duplicate id.

I would do something like this:

var count = ['1','2','3','4'];
var container = document.getElementById('items');
for(var i = 0; i < count.length; i++){
    container.append('<div>' + count[i] + '</div>');
}

And to improve the iteration:

var counts = ['1','2','3','4'];
var container = document.getElementById('items');
counts.forEach(function(count) {
    container.append('<div>' + count + '</div>');
});

It is rarely necessary to use for(var i = 0; i < x; i++). Using forEach, map or reduce are considerably better (code is more concise, temporary variables are unnecessary etc.).

11,536

Author by

cord

Updated on June 26, 2022

Comments

cord about 2 years
This is a really simple question but I don't know why it doesn't work. I have an array with 4 items inside. And I have a container which I would like to insert a number of divs based on the number of items in my array. I used a for loop for this but it is only creating one div. Should it not create 4 of the same div elements?

This is the code:
```
count = new Array['1', '2', '3', '4'];
container = document.getElementById('items');

for (i = 0; i < count.length; i++) {
  container.innerHTML += '<div id="items"></div>';
}
```
```
#items {
  width: 20px;
  height: 20px;
  background: gold;
}
```
```
<div id="items"></div>
```
This is the link http://codepen.io/2bu/pen/jyxNbw
cord over 7 years

To make sure I understand, I have to remove ID and change it to a Class instead and put VAR in front of my ARRAY container ?
Mitchell Carroll over 7 years

Not quite, for the ID issue yes, but for the array issue there's something else underlying that's not right. Arrays are a built-in type in javascript so you don't use new for it, you instead just use an array literal.
cord over 7 years

Ok cool so I just made the changes and I still get the same result codepen.io/2bu/pen/jyxNbw
Mihai Alexandru-Ionut over 7 years

@cord, look at my answer. In your codepen example there is no element with id items.
cord over 7 years

Do I have to change document.getElementById
cord over 7 years

@Alex, Thanks I copied and passed your answer
Mihai Alexandru-Ionut over 7 years

@cord, don't forget to accept answer in order to help other people.
cord over 7 years

How would I be able to use each one as an Class / ID if I want to give [3] for example a different background color
Mihai Alexandru-Ionut over 7 years

Do you want to change the background color for three of squares ?
cord over 7 years

Yes but the bigger reasoning is the I would like to be able to STYLE each one
Mihai Alexandru-Ionut over 7 years

Yes, that's possible..i will update my answer in few seconds.
cord over 7 years

If I have some understanding of how to style one [ 3 ] for example I should be able to target each one
cord over 7 years

@Alex, Thanks for that code, I would like to get the ID of [ 3 ] from JS and style that ID square [3] in CSS, not JS
Mihai Alexandru-Ionut over 7 years

Do you want to style every square ?
Mihai Alexandru-Ionut over 7 years

What do you mean I would like to get the ID of [ 3 ] JS ?