javascript+html

Question

Shikha_1 -4 Light Poster

11 Years Ago

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

html-css javascript

Edited 11 Years Ago by JorgeM because: moved to an appropriate forum category

2 Contributors
2 Replies
194 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by Shikha_1

LaxLoafer 71 Posting Whiz in Training

11 Years Ago

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 11 Years Ago by LaxLoafer

Reply to this topic

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.

Shikha_1 -4 Light Poster · Answer 1 · 2013-08-24T12:07:00+00:00

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