JAVASCRIPT - Dynamic Createt Div's won't take the given style ( width & height )

Question

I'm trying to create some divs, with user input values like amount and size.

In my situation now the divs are createt but in the outoput html ( firefox -> show selected source ) they don't have taken the given attribute like '.style.top' , '.style.left', '.width' ( or .style.width ) and '.height' ( or .style.height ).

the first createt div has -> style="top:0px; left:0px; . . ." the secont one only has -> style="top:0px; . . " // the 'left' attrib doesnt appear anymore and all the following divs doesnt have top or left.

also none of the createt divs have been taken the width and the height.

here is my code, its verry simple and basic, but i cant figure out the problem:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Container Pattern Generator</title>
    <style type="text/css">
        body {

        }

        .div_container {
            position:absolute;
            border:solid 1px #000;
        }
    </style>
    <script type="text/javascript">
        function generate() {
            var boxSize = document.getElementById("txt_boxSize").value;
            var width = document.getElementById("txt_width").value;
            var height = document.getElementById("txt_height").value;
            for( var i = 1; i <= height; i++ ) {
                for( var ii = 1; ii <= width; ii++ ) {
                    var newDiv = document.createElement("div");
                    newDiv.setAttribute("id", "div_container_" + i + "_" + ii);
                    newDiv.setAttribute("class", "div_container");
                    newDiv.width = boxSize + "px";
                    newDiv.height = boxSize + "px";
                    newDiv.style.top = ( i - 1 ) * boxSize;
                    newDiv.style.left = ( ii - 1 ) * boxSize;
                    newDiv.style.backgroundColor = getRandColor();
                    document.getElementById("div_main").appendChild( newDiv );
                    alert("ok");
                }
            }
        }

        function getRandColor() {
            var array = new Array( "#FF0000", "#FF8000", "#FF0000", "#01DF01", "#FF0000", "#0404B4", "#FF8000", "#F2F2F2" );
            return array[ randNum( 0, array.length ) ];
        }

        function randNum( min, max ) {
            var num = Math.floor( Math.random() * ( 1 + max - min ) ) + min;
            return num;
        }
    </script>
</head>

<body>
    <p>Width : <input type="text" value="2" id="txt_width" style="width:50px;"/> - Height : <input type="text" value="2" id="txt_height" style="width:50px;"/> - Box Size : <input type="text" value="40" id="txt_boxSize" style="width:50px;"/> - <input type="button" value="Generate" onClick="generate();"/></p>
    <div id="div_main" style="position:absolute; width:100%; height:100%; background-color:#999;">
    </div>
</body>

you can just copy the cote to a blank html file and see whyt i mean.

thx for all your help. g.r. Ace

EDIT:

the problem is 100% inside the loop, where the div's are created.

in the first version i've simply hardcoded the amount of the divs ( blank divs ) but now it sould be dynamic.. and the problem begins.

Travis J Travis J · Accepted Answer · 2012-10-21T21:13:08

As stated, the problem is within your loop. The main problem is that you should be appending these styles using setAttribute. Also, that your top and left definitions need to have "px" on them, and your width and height are not using the right hook. They could be used if you tried newDiv.style.width or newDiv.style.width. However, I think it is best practice to stick with setAttribute. See this example:

All of this:

newDiv.width = boxSize + "px";
newDiv.height = boxSize + "px";
newDiv.style.top = ( i - 1 ) * boxSize;
newDiv.style.left = ( ii - 1 ) * boxSize;
newDiv.style.backgroundColor = getRandColor();

can become this:

var divTop = parseInt((i - 1)*boxSize) + "px;";
var divLeft = parseInt((ii - 1)*boxSize) + "px;";
newDiv.setAttribute("style",
  "top: " + divTop + 
  "left: " + divLeft + 
  "width: " + boxSize + 
  "px;height: " + boxSize + "px;background-color:"+getRandColor()+ ";");

JAVASCRIPT - Dynamic Createt Div's won't take the given style ( width & height )

2 Answers