CODEWITHSUNDEEP
javascriptappend
DarkArtistry
DarkArtistry

Reputation: 434

I can only append 1 card element from the following Javascript

I can only append 1 card element from the following Javascript. Please Help.

var gb = document.getElementById('game-board');
var cardCount = document.getElementsByClassName('card');
var children = document.createElement('div');

var createCards = function() {
  for (var i = 0; i < 5; i++) {
    children.className = 'card';
    gb.appendChild(children);
  };
};

createCards();

Upvotes: 0

Views: 659

Answers (2)

csm
csm

Reputation: 718

Your code is attempting to append the same div (stored at the children variable) to gb on every iteration of the loop. Try creating a new element for each iteration instead:

var gb = document.getElementById('game-board');

var createCards = function() {
  for (var i = 0; i < 5; i++) {
    var children = document.createElement('div');
    children.className = 'card';
    gb.appendChild(children);
  };
};

createCards();
.card{
  width: 50px;
  height: 50px;
  border: 1px solid gray;
}
<div id="game-board" ></div>

Upvotes: 0

Heidar
Heidar

Reputation: 689

you have only 1 "children" item that you keep moving inside the loop. One way to fix it is to clone it each time before appending:

var gb = document.getElementById('game-board');
var cardCount = document.getElementsByClassName('card');
var children = document.createElement('div');

var createCards = function() {
  for (var i = 0; i < 5; i++) {
    children.className = 'card';
    gb.appendChild(children.cloneNode(true));
  };
};

createCards();

Upvotes: 1

Related Questions