を完了していない私は自分のコードを動作させると、このように見えるかを把握しようとしている:はjQueryを使ってグリッドを作る - コード
質問です:
作成します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>
すべてのエラーメッセージは?コードを実行するとどうなりますか? BTW。変数を定義するにはlet、var、constを使用するべきです。コード内で宣言する方法はすべてウィンドウオブジェクトのグローバルプロパティです。これは非常に悪い習慣です。 –
*グリッドを表示させるために自分の.jsが正しいかどうかわかりません* - あなたは*正しい*ではないことを知っています。 'for(row = entered_text; row = 15; row + = 1)をコーディングすると、それ自体が命令のサンプルコードとは既に異なっていたことに注意してください。 – nnnnnn
@nnnnnn私は 'for(row = 1; row <= entries_text; row + = 1)'としました: – MeowMeow