使用 jquery 制作网格 - 代码不完整

Question

我正在尝试弄清楚如何使我的代码正常工作并看起来像这样：

问题是：

Create an HTML page with a text input, a button, and container for a Raphaël paper object. We will have the user enter a number in the form and click the button, and then draw an n×n grid of squares. If the user enters 8 in the text input and clicks the button, you should draw eight rows and columns of little squares. To do this, you will need two for loops nested inside each other like this:*

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

In the (inner-most) loop body, draw a little square on the paper with an x and y value calculated from the loop counters so the squares end up in a grid pattern.

这是我的代码：

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


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>

Answer 1

你很接近，你只是将 r 值（一个非数字）乘以 col，这将 return NaN，这不是好的。然后我也将 entered_text 转换为数字并修改了 for 循环。所以我继续更新它。如果你想要填充，只需将所有 20 增加到 25.

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


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>

使用 jquery 制作网格 - 代码不完整

Making a grid with jquery - code not complete

javascript

jquery

html

raphael