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

Question

The page i am making is designed to:

take the dimensions of a set of tiles and a wall then print out how many tiles are needed to fill the area of the wall
print on screen a visual representation of what the wall will look like with the tiles on.

so far i've managed to successfully complete the 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 from 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 the areas of the tile and the wall
var tileArea = tileWidth * tileHeight;
var wallArea = wallWidth * wallHeight;
//divide these to find the number of tiles needed 
var noOfTiles = (wallArea/tileArea);
document.getElementById("result").innerHTML="number of tiles needed are " +            
noOfTiles;
}
</script>

Now when it comes to printing the wall, I was trying to use a nested for loop to print the tiles. As 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
for (var i = 0; i < wallHeight; i = i + tileHeight)
{ 
  //collumns
  for (var a = 0; a < wallWidth; a = a + 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 the nested for loop would print each column on the row than go to the next row so on. For some reason my printTiles is not working at all and i dont understand why? secondly, when i get it working can i simply use

document.getElementById("wallspace").innerHTML=printTiles();

Leave a comment if you don't understand what i'm trying to do and i'll try to explain it better.

Simon M · Accepted Answer · 2013-05-13 23:50:32Z

2

You are appending your DIV to itself with this line:

div.appendChild(div);

What you should be doing is something like this:

document.getElementById("wallspace").appendChild(div);

Also, your printTiles() function has no way of knowing what wallWidth, tileWidth, wallHeight and tileHeight are, as they are declared inside of createWall(). You might need to either combine these functions or add these lines to the 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;

edited May 13, 2013 at 23:50

answered May 13, 2013 at 23:45

Simon M

2,9412 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aidan Gee Over a year ago

thanks for your help , ive now managed to print out some tiles that are the correct size in pixels, but a seemingly random amount of them ill update my code in the question , thanks again !

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related