javascript - 如何在 X 值为真后显示 myArray？

Question

我正在尝试创建一个程序，如果用户输入 1-9 之间的 X 数字，它会采用该 X 数字并创建 X 数字的行和列。例如，如果用户输入“5”，输出应该是这样的:
....1
...2.
..3..
.4...
5....

我现在无法用我的代码让它显示输出。我对 JavaScript 还是个新手，所以非常感谢您的帮助。

function drawSquare() {
let myArray1 = ["1"];
let myArray2 = [".1", "2."];
let myArray3 = ["..1", ".2.", "3.."];
let myArray4 = ["...1", "..2.", ".3..", "4..."];
let myArray5 = ["....1", "...2.", "..3..", ".4...", "5...."];
let myArray6 = [".....1", "....2.", "...3..", "..4...", ".5....", "6....."];
let myArray7 = ["......1", ".....2.", "....3..", "...4...", "..5....", ".6.....", "7......"];
let myArray8 = [".......1", "......2.", ".....3..", "....4...", "...5....", "..6.....", ".7......", "8......."];
let myArray9 = ["........1", ".......2.", "......3..", ".....4...", "....5....", "...6.....", "..7......", ".8.......", "9........"];
let l1 = myArray1.length;
let l2 = myArray2.lenght;
let l3 = myArray3.length;
let l4 = myArray4.length;
let l5 = myArray5.length;
let l6 = myArray6.length;
let l7 = myArray7.length;
let l8 = myArray8.length;
let l9 = myArray9.length;
let number = document.getElementById("textbox3")
let getNumber = number.value 
if (getNumber != 1 || getNumber > 9) {
	alert("You have entered an incorrect number");
	} else if (getNumber = 1){
		text = "<br>";
			for (i = 0; i < l1; i++) {
			text += "<br>" + myArray1[i] + "<br>";
			}
		}		
	}

<p>Enter a height for our square<input type="text" id="textbox3"><button id="drawSqaure" onclick="drawSquare()">Draw Square</button></p>
<p id="output2">Output goes here</p>

Answer 1

使用文本区域的小实现。它使用要绘制的行数来了解要绘制多少点，具体取决于您要绘制的行。

document.getElementById('rowCount').addEventListener('input', function(e){
  var rowCount = parseInt(e.target.value.trim() || '0', 10);
  var textarea = document.getElementsByTagName('textarea')[0];
  
  textarea.innerHTML = '';
  
  for (var i = 1; i <= rowCount; i++) {
    if (i > 1) textarea.innerHTML += "\n";
    
    textarea.innerHTML += '.'.repeat(rowCount - i);
    textarea.innerHTML += i;
    textarea.innerHTML += '.'.repeat(i - 1);
  }
});

<input type="number" id="rowCount" value="0" min="0">
<textarea></textarea>