2017-04-01 1 views
0

を完了していない私は自分のコードを動作させると、このように見えるかを把握しようとしている:はjQueryを使ってグリッドを作る - コード

GOAL

質問です:

作成しますRaphaël紙オブジェクト用のテキスト入力、ボタン、およびコンテナを備えたHTMLページ。ユーザーはフォームに数字を入力してボタンをクリックし、次にn×nグリッドの四角形を描きます。 ユーザーがテキスト入力に8を入力してボタンをクリックすると、小さな正方形の8つの行と列を描画する必要があります。これを行うには、あなたがこのように互いの内部にネスト・ループのための2つが必要になります:*(最も内側の)ループ本体で

for (row=1; ...) { 
    for (col=1; ...) { 
    ... 
    } 
} 

をXと紙の上に小さな四角形を描画し、 y値がループカウンタから計算されるので、四角形はグリッドパターンになります。

これは私のコードです:

x = 0 
 
y = 0 
 
grid = function() { 
 
\t entered_text = $('#howmany').val(); 
 
\t for (row = entered_text; row <= 15; row += 1){ 
 
\t \t for (col = entered_text; col <= 15; col += 1) { 
 
\t \t \t r = paper.rect(x, y, 20, 20); 
 
\t \t \t x = r * col 
 
\t \t } \t 
 
\t \t y = r + row; 
 
\t } 
 
} 
 

 

 
setup = function() { 
 
    paper = Raphael('svg', 400, 400) 
 
    jQuery('#start').click(grid) 
 
    
 
} 
 

 
jQuery(document).ready(setup)
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8" /> 
 
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.1.js"></script> 
 
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script> 
 
<script src="logic.js"></script> 
 
<title>Exercise 11</title> 
 
</head> 
 
<body> 
 
<h1>Exercise 11</h1> 
 

 

 
<div class="gridsize">Grid Size: 
 
<input type="text" id="howmany" /> 
 
<button id="start">Go</button></div> 
 

 
<div id="svg"></div> 
 

 
</body> 
 
</html>

+0

すべてのエラーメッセージは?コードを実行するとどうなりますか? BTW。変数を定義するにはlet、var、constを使用するべきです。コード内で宣言する方法はすべてウィンドウオブジェクトのグローバルプロパティです。これは非常に悪い習慣です。 –

+0

*グリッドを表示させるために自分の.jsが正しいかどうかわかりません* - あなたは*正しい*ではないことを知っています。 'for(row = entered_text; row = 15; row + = 1)をコーディングすると、それ自体が命令のサンプルコードとは既に異なっていたことに注意してください。 – nnnnnn

+0

@nnnnnn私は 'for(row = 1; row <= entries_text; row + = 1)'としました: – MeowMeow

答えて

1

あなたが近くにいる、あなただけの、NaNを返します。これは、colにより、r値、非数を乗じたし、良くありません。次に私はentered_textを番号に変換し、forのループを修正しました。そこで先に進んで更新しました。パディングが必要な場合は、20をすべて25に増やすだけです。

x = 0 
 
y = 0 
 
grid = function() { 
 
\t entered_text = Number($('#howmany').val()); 
 
\t for (row = 0; row < entered_text; row += 1){ 
 
\t \t for (col = 0; col < entered_text; col += 1) { 
 
\t \t \t paper.rect(20 * col, 20 * row, 20, 20); 
 
\t \t } \t 
 
\t } 
 
} 
 

 

 
setup = function() { 
 
    paper = Raphael('svg', 400, 400) 
 
    jQuery('#start').click(grid) 
 
    
 
} 
 

 
jQuery(document).ready(setup)
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8" /> 
 
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.1.js"></script> 
 
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script> 
 
<script src="logic.js"></script> 
 
<title>Exercise 11</title> 
 
</head> 
 
<body> 
 
<h1>Exercise 11</h1> 
 

 

 
<div class="gridsize">Grid Size: 
 
<input type="text" id="howmany" /> 
 
<button id="start">Go</button></div> 
 

 
<div id="svg"></div> 
 

 
</body> 
 
</html>

+0

ループ条件で '<='ではなく '<='でなければなりません。 – nnnnnn

+0

ありがとうございました! :D – MeowMeow

+0

ねえ、あなたが解決策としてマークすることができれば、それは多くの助けになります。そして問題はない。しかし、nnnnnnは正しいです、私は私の答えを更新しました。 – Neil

関連する問題