CODEWITHSUNDEEP
javascript
Henry Lynx
Henry Lynx

Reputation: 1129

DIVs are not visible? JavaScript

I have a problem with divs that I create with a simple function. I can see them in the console that they have color and are positioned well. However they are not displayed on the browser?

function CreateDivs(){
        var dfrag = document.createDocumentFragment();
        var divNumbers = 5;
        var i = 0;
        var angle = 0;
        for(i=0; i < divNumbers; i++){
            x = 100 * Math.cos(angle) + 200;
            y = 100 * Math.sin(angle) + 200;

            var div = document.createElement("div");
                div.style.left = x + "px";
                div.style.right = y + "px";
                div.style.borderColor = rndColor();
                div.style.backgroundColor = rndColor();

                dfrag.appendChild(div);
                }
                divWrapper.appendChild(dfrag);
            }

I use a simple function rndColor();

 var createButton = document.getElementById("div-generator");
 var divWrapper = document.getElementById("wrapper");

A working JsBin here.

Upvotes: 1

Views: 108

Answers (2)

ComFreek
ComFreek

Reputation: 29424

Your divs are "empty".

You can

  • set a content, so the <div> gains a height (jsFiddle):

    div.innerHTML = "A";

  • set a height instead of providing a content (jsFiddle):

    div.style.height = "10px";

  • combine the latter approach with CSS classes (jsFiddle):

    div.className = "my-div";

.my-div {
  min-height: 20px;
}

Upvotes: 3

q0re
q0re

Reputation: 1359

I think your div has no width and height.

set the width and height to your div.

div.style.width = "100px";
div.style.height = "100px";

Upvotes: 0

Related Questions