Request for help: setting up a grid using nested if loops (JavaScript)

Question

I was having some difficulties setting up a grid using nested if statements. It's a relatively simple task but I seem to be stuck!

This is a school assignment. The instructions are below:

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

Your page will look something like this (depending on the number the user enters, obviously). Don't worry about the coloured boxes yet: that is the next part."

The outcome should look something like this:

image

You can ignore the fact that some of squares are colored. So far I'm come up with this:

generate = function() {
n = 0
x = 0
y = 0
n = $('#squares').val()
for (row = 1; row <= n; row += 1) {
	for (col = 1; col <= n; col += 1) {
		r = paper.rect(x, y, 10,10)
		x = x + 20
	}
	y = y + 20
}
}

setup = function() {
	paper = Raphael('container', 400, 400)
	$('#number').click(generate)
}
jQuery(document).ready(setup)

Thank you in advance!

It looks like you have the basic idea, but there are some missing pieces - you should try to set up a jsfiddle or similar environment to show what you have working. For example, what is paper.rect()? One problem that you do have it that you are incrementing x by 20 each time in the inner loop, but you would have to reset it to the 0 position for each new row, for example. — Ken H.
– Ken H., Commented Apr 1, 2017 at 2:16

Benji Lees · Accepted Answer · 2017-04-06 10:23:51Z

The starting value for the rows and column in the for loops can be set with the start variable 0 and the condition check row < n.

Here is an example using javascript and canvas without an external library.

html:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>JS Bin</title>
</head>
<body>
  <label>Grid size:</label>
  <input type="number" name="go" type="text" name="" id="">
  <button class="button">go</button>
  <canvas id="canvas" width="400" height="400"></canvas> 
</body>
</html>

js:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

document.getElementsByClassName('button')[0].onclick = function() {
  var value = document.querySelector('input[name="go"]').value;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var space = 400 / (value);

  for (row = 0; row < value; row += 1) {
    for (col = 0; col < value; col += 1) {
        ctx.fillRect(row * space, col * space, space  - 10, space  - 10)
    }
  } 
}

Collectives™ on Stack Overflow

Request for help: setting up a grid using nested if loops (JavaScript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related