javascript - how to use java script to create new div's inside an existing div? -

the page making designed to:

1. take dimensions of set of tiles , wall print out how many tiles needed fill area of wall
2. print on screen visual representation of wall tiles on.

so far i've managed complete first part.

<style> #wallspace {     width:300px;     height:auto;     overflow:hidden;     position:relative;     margin:auto; } </style>  <form >     tile dimensions<br />     width: <input type="text" id="tile_width" />cm     height: <input type="text" id="tile_height" />cm      <br />    wall dimensions<br />    width: <input type="text" id="wall_width" />cm      height:<input type="text" id="wall_height" />cm      </form>     <button onclick="createwall()" >try it</button>    <p id="result">  </p>     <div id="wallspace">    </div>   <script language="javascript" type="text/javascript">  function createwall() { //collect dimensions user input var tilewidth = document.getelementbyid("tile_width").value; var tileheight = document.getelementbyid("tile_height").value; var wallwidth = document.getelementbyid("wall_width").value; var wallheight = document.getelementbyid("wall_height").value; //find areas of tile , wall var tilearea = tilewidth * tileheight; var wallarea = wallwidth * wallheight; //divide these find number of tiles needed  var nooftiles = (wallarea/tilearea); document.getelementbyid("result").innerhtml="number of tiles needed " +             nooftiles; } </script> 

now when comes printing wall, trying use nested loop print tiles. below:

function printtiles() {   var tilewidth = document.getelementbyid("tile_width").value; var tileheight = document.getelementbyid("tile_height").value; var wallwidth = document.getelementbyid("wall_width").value; var wallheight = document.getelementbyid("wall_height").value; //rows (var = 0; < wallheight; = + tileheight) {    //collumns   (var = 0; < wallwidth; = + tilewidth)   {     var div = document.createelement("div");     div.style.width = tilewidth + "px";     div.style.height = tileheight + "px";     div.style.cssfloat = "left";     div.style.borderwidth = "2px";     div.style.borderstyle = "solid";      div.innerhtml = i;     document.getelementbyid("wallspace").appendchild(div);     } } 

so nested loop print each column on row go next row on. reason printtiles not working @ , dont understand why? secondly, when working can use

document.getelementbyid("wallspace").innerhtml=printtiles(); 

leave comment if don't understand i'm trying , i'll try explain better.

you appending div line:

div.appendchild(div); 

what should doing this:

document.getelementbyid("wallspace").appendchild(div); 

also, printtiles() function has no way of knowing wallwidth, tilewidth, wallheight , tileheight are, declared inside of createwall(). might need either combine these functions or add these lines beginning of printtiles():

var tilewidth = document.getelementbyid("tile_width").value; var tileheight = document.getelementbyid("tile_height").value; var wallwidth = document.getelementbyid("wall_width").value; var wallheight = document.getelementbyid("wall_height").value;