时间戳

首页 > 解决方案 > 无法迭代 while 语句

javascript - 无法迭代 while 语句

问题描述

新手问题。要有耐心。

作为一个练习，我试图通过附加到 innerHTML 来创建一个网格。

我无法让循​​环在第一次迭代之后重复。我确定这是一些基本的东西，但我必须从某个地方开始。

我试过用“let”代替“var”，用console.log代替document...，用谷歌搜索几个小时......

    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>

我想要的是：

#*#*#*#*#

*#*#*#*#*

#*#*#*#*#

等取决于网格的大小。

我得到的只是上面的一行。

标签： javascript

解决方案

您的代码包含两个循环，其中一个嵌套在另一个循环中。

您的嵌套循环将在第一次迭代中运行，同时满足给定条件sizeGrid <= originalSize. 然而，在主循环的所有后续迭代中，已经满足给定条件。该值未在循环之间重置，因此嵌套循环不会再次运行。

这可以通过sizeGrid在主循环中移动变量声明来快速更新来解决：

while (heightGrid <= originalSize) {
    var sizeGrid = 0;

但是，鉴于您要实现的目标，您可以使用不同的循环类型将其压缩。

您实际上已经手动编写了一个 for 循环。您设置起始计数器值，运行循环，然后增加您的计数器。这是我建议的方法：

for (let heightGrid = 0; heightGrid <= originalSize; heightGrid++) {
    ... logic here

    // nested loop
    for (let sizeGrid = 0; sizeGrid <= originalSize; sizeGrid++) {
        // nested logic
    }
}

但是，您必须小心比较。尽管 originalSize 为 8，但您的原始循环迭代 10 次。上面的 for 循环实际上将运行 9 次，这似乎与您正在寻找的输出相匹配。我倾向于调整您的编号，以便更清晰。

这是我想出的粗略方法：

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 />';
}

推荐阅读