javascript - X值为真后如何显示myArray?
问题描述
我正在尝试创建一个程序,如果用户输入 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>
解决方案
使用文本区域的小实现。它使用要绘制的行数来知道要绘制多少个点,具体取决于您要绘制的行。
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>
推荐阅读
- c++ - Windows 多线程强制线程优先级
- javascript - 悬停在图像上时,仅显示光标所在的部分
- spring-boot - 有没有办法在春季启动测试中从 src/test/resources/application.properties 加载属性?
- python - 我在python的链表中遇到问题
- java - 在 Firebase 中搜索时如何执行 OR 查询?
- javascript - Javascript/html 文件无法在浏览器中正确打开???浏览器只是无限加载(在 safari 和 chrome 上尝试过)
- python - 在将数据添加到包含列表作为其值的字典中时,我以前的所有键都会更新为列表的最新值
- javascript - 从 firebase 读取如何工作?
- python - Pandas:ValueError:数组的长度必须相同 - 当 orient=index 不起作用时
- java - PKIX 路径构建失败:sun.security.provider.certpath.SunCertPathBuilderException:代理后面