Member Avatar for Shikha_1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
  <script language="javascript"> 
    function genDivs(v)
    { 

        var e = document.body;
                var row = document.createElement("div"); 
                row.className = "row";
                row.style.width = "70%";
                row.style.height = "100%";
                row.style.border="8px solid black";
                row.style.overflow="scroll"; 
                for(var x = 1; x <= v; x++)
                { 
                    var cell = document.createElement("div"); 
                    cell.className = "gridsquare"; 
                    cell.innerText = "class"+x;
                    row.appendChild(cell); 
                    cell.style.display="inline";
                    cell.style.width = "25%";
                    cell.style.height = "100%";
                    cell.style.border="3px solid black";
                    cell.style.backgroundImage="url('abc.jpg')";
                } 
                e.appendChild(row); 

        document.getElementById("code").appendChild(e);
        document.getElementById("done").hidden=0;

    }
  </script> 
</head> 
<body>
    <div style="position:absolute;height:70%;width:70%;border:4px solid black">
    <div style="height:20%;width:70%;border:2px solid  #00FFFF">

    <input name="button" type="button" onclick="genDivs(30)" value="click me" />
    </div>

    <div id="code" style="height:50%;width:70%;border:2px solid  #FF00CC">
        </div>
    <div id="done" style="height:30%;width:70%;border:2px solid  #660066">
    <input name="submit" type="button" hidden="1" id="done" value="done" />
    </div>
    </div>

</body> 
</ht

this code is working fine but i want when click on the button"clickme" then the division of class should come inside the second division

Edited by JorgeM because: moved to an appropriate forum category
  • 2 Contributors
  • 2 Replies
  • 194 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Shikha_1
Member Avatar for LaxLoafer

Hi Shika

I'm unsure what you meant by...

...the division of class should come inside the second division

Which class were you referring to? Could you explain further?

Looking at your code, there are a couple of problems I can immediately see.

On line 29 you're attempting to append 'e' to a div in the document body. As e is the document.body, I don't believe this will work.

On the following line you're attempting to set the hidden attribute of an input element to zero, referenced by its ID. Unfortunately there are two elements on the page named 'done'. Element IDs should be unique.

Edited by LaxLoafer
Member Avatar for Shikha_1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<style type="text/css">

.gridsquare
{
 background-image:url('abc.jpg');
 height:200px;
 width:300px; }
</style>
  <script language="javascript"> 
    function genDivs(v)
    { 

                       //var e = document.body;
                       var row = document.createElement("div"); 
                       row.class = "row";
                       //row.style.width = "70%";
                       row.style.height = "50%";
                       //row.style.border="8px solid black";
                       row.style.overflow="scroll"; 
                       for(var x = 1; x <= v; x++)
                       { 
                               var cell = document.createElement("div"); 
                               cell.class = "gridsquare"; 
                               cell.innerText = "class"+x;
                               row.appendChild(cell); 
                               cell.style.display="inline";
                               //cell.style.height = "100%";
                               cell.style.border="3px solid black";
                               //cell.style.background-image="url('abc.jpg')";
                       } 
                         //e.appendChild(row); 

                         document.getElementById("code").appendChild(row);
                         document.getElementById("done").hidden=0;

    }
  </script> 
</head> 
<body>
    <div style="position:absolute;height:70%;width:70%;border:4px solid black;">
    <div style="height:20%;width:70%;border:2px solid  #00FFFF;">

    <input name="button" type="button" onclick="genDivs(30)" value="click me" />
    </div>

    <div id="code" style="height:50%;width:70%;border:2px solid  #FF00CC;">
        </div>
    <div id="d" style="height:30%;width:70%;border:2px solid  #660066;">
    <input name="submit" type="button" hidden="1" id="done" value="done" />
    </div>
    </div>

</body> 
</ht

i want each bakground image in each div

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.