Home/ Questions/Q 7515365
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:47:03+00:00

I want to create div dynamically based on some calculations.I am able build div’s

  • 0

I want to create div dynamically based on some calculations.I am able build div’s dynamically but the only issue is it’s not taking height and width on fly.please any one share their view or code if possible.

Here’s the script which i used for your reference.

<script type="text/javascript" language="javascript">
   function createDiv()
   {
            var totalheight=400;
            var totalwidth = 600;
            var height = 80;
            var width = 40;
            var divheight = totalheight / height;
            var divwidth = totalwidth / width;
            var id=1;

            for(var i=1;i<=divheight;i++)
            {
                var eh=divwidth;
                var fh=1;
                for (var w = 1; w <= divwidth; w++)
                {
                   var div=document.createElement("<div id='"+id+"' style=\"background:#F0E68C;width:'"+width+"'px;height:'"+height+"'px;border:solid 1px #c0c0c0;padding: 0.5em;text-align: center;float:left;\"></div>"); 
                   document.body.appendChild(div);
                   eh=eh+divheight;
                   fh=fh+divheight;
                   id++;
                }
                 var div1=document.createElement("<br/>");
                 document.body.appendChild(div1);
            }     
    }
    </script>

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this.. hope this is what you are trying to do.. 

    <html>

<script type="text/javascript" >
 function newDiv(){
            var totalheight=400,ht = 80 , totalwidth = 600 ,wd = 40 ,i;
            var divheight = totalheight / ht;
            var divwidth = totalwidth / wd;
            var id=1;

            for(var i=1;i<=divheight;i++)
            {
                var eh=divwidth;
                var fh=1;
                for (i = 1; i <= divwidth; i++)
                {
                   var div=document.createElement("div")
                   div.setAttribute("id","newDivId"+id)
                   div.setAttribute("class","newDiv")
                   div.style.width =wd+"px";
                   div.style.height =ht+"px";
                   document.body.appendChild(div);
                   eh=eh+divheight;
                   fh=fh+divheight;
                   id++;
                }
                 var div1=document.createElement("<br/>");
                 document.body.appendChild(div1);
            }     
    }
</script>
<style type="text/css">
.newDiv{
    background-color:#F0E68C;
    border:1px solid #c0c0c0;
    padding: 0.5em;
    text-align:center;
    float:left;
}
</style>
<body>
    <input type="button" onclick="newDiv()" value="Click Me">
</body>
</html>
    • 0