0
<!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: moved to an appropriate forum category

2
Contributors
2
Replies
18
Views
4 Years
Discussion Span
Last Post by Shikha_1
0

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

0
<!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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.