0

私が作成しているページは、次のように設計されています。

  1. 一連のタイルと壁の寸法を取得し、壁の領域を埋めるために必要なタイルの数を出力します
  2. タイルを貼った壁がどのように見えるかを視覚的に表現したものを画面に印刷します。

これまでのところ、最初の部分を無事に完了することができました。

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

壁の印刷に関しては、ネストされた for ループを使用してタイルを印刷しようとしていました。以下のように：

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); 
   }
}

そのため、ネストされた for ループは、次の行に移動するよりも行の各列を出力します。何らかの理由で printTiles がまったく機能せず、その理由がわかりません。第二に、それが機能するようになったら、単に使用できますか

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

私がやろうとしていることを理解していない場合は、コメントを残してください。よりよく説明しようとします。

4

1 に答える 1

2

次の行を使用して、DIV をそれ自体に追加します。

div.appendChild(div);

あなたがすべきことは次のようなものです：

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

また、関数は、、およびの中で宣言されているため、それらがprintTiles()何であるかを知る方法がありません。これらの関数を組み合わせるか、次の行を の先頭に追加する必要がある場合があります。wallWidthtileWidthwallHeighttileHeightcreateWall()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;
于 2013-05-13T23:45:22.333 に答える