CODEWITHSUNDEEP
javascripthtml
Kirby Crab
Kirby Crab

Reputation: 11

Divs created in Javascript don't appear

I'm making an rgb guesser game for school, and the stretch goal I'm trying to reach is "making divs in javascript". For some reason, my divs aren't appearing when I'm making them. Here's the javascript code snippers

dothething()
function dothething(){
  divs = MakeDivs(4);
  var randomcolor = Math.floor(Math.random()*4);
  WinningDiv = divs[randomcolor];
}

function MakeDivs(X){
  for(i = 0;i<=X;i++){
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
  }
  console.log(divs)

  var container = document.getElementById("container")
  container.appendChild(div);

  return divs
}

and here's some filler html

<body>
  <div> FillerDiv</div>
</body>

Upvotes: 1

Views: 77

Answers (6)

dtalaba
dtalaba

Reputation: 259

You can use documentFragment for creating a block which contains all the colored divs. I've refactored a little bit your code. You can check the solution on jsfiddle - https://jsfiddle.net/2zcg59sd/ or you can run the snippet here.

dothething()

function dothething(){
var divs = MakeDivs(4) ;
document.getElementById("randomColors").appendChild(divs);
}


function MakeDivs(X){
  var docFragment = document.createDocumentFragment();

  for(i = 0;i<=X;i++){
      var randomcolor = Math.floor(Math.random()*900000) + 100000;
      var newDiv = document.createElement("div"); 

      newDiv.style.borderRadius = "50%";
      newDiv.style.height = "100px";
      newDiv.style.float = "left";
      newDiv.style.width = "125px";
      newDiv.style.backgroundColor = "#" + randomcolor;

      docFragment.appendChild(newDiv);
  }


  return docFragment
}
<div> FillerDiv</div> 
<div id="randomColors"></div>

Upvotes: 1

A.K.
A.K.

Reputation: 2322

This is helpful for you. Without defining HTML tag ID you are getting Id container. The variable should be defined before use anywhere. You missed divs array to define. You should add every div in the loop.

dothething()
function dothething(){
var divs = MakeDivs(4)
var randomcolor = Math.floor(Math.random()*4)
WinningDiv = divs[randomcolor]
}

function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
    var div = document.createElement("div");
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
    div.innerHTML = 'Test'+i;
    divs.push(div);
    container.appendChild(div);
}
console.log(divs);
return divs
}
<body>
<div id="container"> FillerDiv</div>
</body>

Upvotes: 1

Ele
Ele

Reputation: 33726

Missing array of divs.

Incorrect way to apply width and height.

div.height = "100px";
    ^

div.width = "125px";
    ^


dothething()

function dothething() {
  divs = MakeDivs(4)
  var randomcolor = Math.floor(Math.random() * 4)
  WinningDiv = divs[randomcolor]
}

function MakeDivs(X) {
  var container = document.getElementById("container");
  var divs = [];
  for (i = 0; i <= X; i++) {
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.style.height = "100px";
    div.style.width = "125px";
    container.appendChild(div);
    
    divs.push(div);
  }
  //console.log(divs)

return divs
}
#container div {
  background-color: lightgreen;
}
<div>
FillerDiv
<div id='container'></div>
</div>

Upvotes: 1

Battlesquid
Battlesquid

Reputation: 302

You forgot to append the div to the container.

var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
container.appendChild(div);

Upvotes: 1

Harun Diluka Heshan
Harun Diluka Heshan

Reputation: 1256

You have to embed container.appendChild(div); inside the loop. In your original code, you have just appended the last div.

function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
    divs.push(div);
    container.appendChild(div);
}
console.log(divs);     
return divs;
}

Upvotes: 1

Shiko
Shiko

Reputation: 2624

You need to include the append inside the loop and use a correct control to append your DIV. Also in case you want to return your DIVs elements, add them to array and return them as in below code:

function MakeDivs(X){
var divs = [];
for(i = 0;i<=X;i++){
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
    document.body.appendChild(div);
    divs.push(div);
}
console.log(divs)
return divs
}

Upvotes: 1

Related Questions