Question

我正在试图弄清楚如何使我的代码工作，看起来像所附的照片:(

问题是： **使用文本输入，按钮和Raphaël纸张对象的容器创建HTML页面。我们将让用户在表单中输入一个数字并单击按钮，然后绘制一个n×n的正方形网格。如果用户在文本输入中输入8并单击该按钮，则应绘制八行和一些小方块。要做到这一点，你需要两个相互嵌套的for循环：

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

在（最里面的）循环体中，在纸上画一个小方块，从循环计数器计算出x和y值，这样正方形就会以网格图形结束。**

请帮帮我:(

我希望我的代码看起来像这样：（

这是我的

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>

编辑：到目前为止，我不知道我的.js是否正确以使网格显示

Answer 1

您的代码在多个地方都有误：

创建网格使用：
```
char
```

你在for循环的错误部分写了“entered_text”。

执行此操作时：

for (row = 1; row <= entered_text; row += 1){
    for (col = 1; col <= entered_text; col += 1) {
    }   
}

您正在将rect对象存储到y中。这是一个对象而不是数字。

因此，

r = paper.rect(x, y, 20, 20);

就像说

y = r + row;

你不能将“3”添加到“汽车”，因为3是一个数字而“汽车”是一个东西。

这是jsFiddle中带注释的工作解决方案。

y=car + 3

我不知道如何修复我的代码。我想做一个网格

1 个答案: