NEWB question. Be patient.
As an exercise I am trying to create a grid simply by appending to innerHTML.
I cannot get the loop to repeat beyond its first iteration. I'm sure it's something basic but I have to start somewhere.
I've tried "let" instead of "var", console.log instead of document..., hours of googling.....
var originalSize = 8;
var sizeGrid = 0;
var heightGrid = 0;
var switchChar = 2;
var switchCharTwo = 1;
var charOne = "x";
var charTwo = "#";
while (heightGrid <= originalSize){
document.getElementById("el").innerHTML+="<br>";
if (switchChar % 2 === 0){
switchCharTwo = 1;
}
else {
switchCharTwo = 2;
}
while (sizeGrid <= originalSize){
if (switchCharTwo % 2 === 0){
document.getElementById("el").innerHTML+=charOne;
}
else {
document.getElementById("el").innerHTML+=charTwo;
}
sizeGrid = sizeGrid + 1;
switchCharTwo = switchCharTwo + 1;
}
heightGrid = heightGrid + 1;
switchChar = switchChar + 1;
}<html>
<body>
<p id="el"></p>
</body>
</html>What I want is:
#*#*#*#*#
*#*#*#*#*
#*#*#*#*#
etc. depending on the size of the grid.
All I get is one line of the above.
2 Answers 2
The problem is in the sizeGrid which is stopping the inner loop by doing this it will work fine.
while (heightGrid <= originalSize){
sizeGrid = 0;
document.getElementById("el").innerHTML+="<br>";
if (switchChar % 2 === 0){
switchCharTwo = 1;
}
else {
switchCharTwo = 2;
}
while (sizeGrid <= originalSize){
if (switchCharTwo % 2 === 0){
document.getElementById("el").innerHTML+=charOne;
}
else {
document.getElementById("el").innerHTML+=charTwo;
}
sizeGrid = sizeGrid + 1;
switchCharTwo = switchCharTwo + 1;
}
heightGrid = heightGrid + 1;
switchChar = switchChar + 1;
}
Comments
Your code contains two loops with one nested inside of the other.
Your nested loop is going to run on the first iteration while it meets the given condition, sizeGrid <= originalSize. On all subsequent iterations of the main loop however, the given condition has already been met. The value wasn't reset between loops therefore the nested loop doesn't run again.
This could be resolved with a quick update by moving the sizeGrid variable declaration within the main loop:
while (heightGrid <= originalSize) {
var sizeGrid = 0;
Given what you're looking to achieve however, you could condense this down with a different loop type.
You've essentially manually written a for loop. You set the starting counter value, run the loop, and then increment your counter. Here's the approach I'd suggest:
for (let heightGrid = 0; heightGrid <= originalSize; heightGrid++) {
... logic here
// nested loop
for (let sizeGrid = 0; sizeGrid <= originalSize; sizeGrid++) {
// nested logic
}
}
You'll have to be careful with the comparisons however. Your original loop iterates 10 times despite originalSize being 8. The for loop above will actually run 9 times which seems to match the output you're looking for. I'd be inclined to adjust your numbering so that it's clearer though.
Here's a rough approach I came up with:
const gridSize = 9;
const gridChars = ['x', '#'];
let gridCharCounter = 0;
for (let rows = 0; rows < gridSize; rows++) {
for (let columns = 0; columns < gridSize; columns++) {
const charKey = gridCharCounter % gridChars.length;
document.getElementById("el").innerHTML += gridChars[ charKey ];
gridCharCounter++;
}
document.getElementById("el").innerHTML += '<br />';
}
sizeGridvariable is global, so at the end of the inner loop in the first iteration,(sizeGrid > originalSize), and the inner loop never runs again in the later iterations of the outer loop. Define it inside the outer loop instead, and your code works as expected