尝试根据用户输入显示数组中的元素

Question

我正在尝试制作一个程序，将用户字符串输入显示为x的5x5矩阵。因此，如果用户输入"abc"，结果输出应该是第一行：

预期输出

我目前只允许显示a、b和c，但一旦代码工作，我会将其扩展到字母表中的每个字母。

我为每一行制作了一个数组，其中包含在每一行中制作一个字母所需的字符。

因此，如果用户在abc中输入，程序将把输入分成一个字符数组[‘a’，‘b’，‘c’]，然后计算输入的长度(3)。while循环开始，它将检查用户输入的第一个元素是哪个字母，并将其与alphaRow1数组中的正确元素匹配并打印。while循环将重复此操作，直到它遍历了用户输入中的每个元素。

我目前只尝试了第一行的代码，但稍后会添加其他行。

每当我在用户输入中输入时，它都会出现"a"的alphaRow1元素，无论我输入的是"b"还是"c"。while循环似乎正确重复，因此如果我输入abc，它将显示"a"的alphaRow1元素3次：

用户输入为"abc"时的实际输出

我不确定出了什么问题，所以它每次只显示第一个元素。while循环似乎是正确的，并且它似乎正在正确地递增

alphaRow1 = ["  x  ","xxxx "," xxxx"];
alphaRow2 = [" x x ","x   x","x    "];
alphaRow3 = [" xxx ","xxxx ","x    "];
alphaRow4 = ["x   x","x   x","x    "];
alphaRow5 = ["x   x","xxxx "," xxxx"];
input=prompt("Enter something","Enter here");
letterCount=0;
splitInput = input.split('');
inputLength = input.length;

while (letterCount < inputLength){  //while loop for first row.
if (splitInput[letterCount] = 'a'){ //if selected element in user input
document.write(alphaRow1[0]);   //is 'a' display first element from
letterCount++;                  //alphaRow1
}
else if (splitInput[letterCount] = 'b'){
document.write(alphaRow1[1]);
letterCount++;
}
else if (splitInput[letterCount] = 'c'){
document.write(alphaRow1[2]);
letterCount++;
}
else{
document.write("error");
}
}

Answer 1

if和else语句中存在错误。当您应该使用相等运算符==时，您正在使用赋值运算符=

Answer 2

代码的问题在于，应该在while循环中使用double==if。

实际上，您正在重写if和else-if语句中的值。

Answer 3

除了在if条件下执行的赋值外，还应避免使用document.write。相反，构建一个字符串作为结果，并单独处理页面的实际输出。为此，可以使用pre元素，然后将其textContent属性设置为结果字符串。pre还将呈现换行符并使用单间距字体，这正是您所需要的。

此外，如果您按模式所代表的字母对模式进行键控，即创建一个具有属性"a"的对象，该对象的值将为该字母的完整模式，则模式的数据结构将更易于使用。这样，您就不需要所有单独的if条件，一旦您需要覆盖所有可用的字母和字符，这些条件就会失控。

这是建议的代码。试试看。

// Define your patterns keyed by the letter first, not by the line
var pattern = {
a: ["  X  ",
" X X ",
" XXX ",
"X   X",
"X   X",
"X   X"],
b: ["XXXX ",
"X   X",
"XXXX ",
"X   X",
"X   X",
"XXXX "],
c: [" XXXX",
"X    ",
"X    ",
"X    ",
"X    ",
" XXXX"],
'?': [" XXX ",
"X   X",
"   X ",
"  X  ",
"     ",
"  X  "]
};
// Use split/join and map to gather the output string. Do
// not write with document.write
function getOutput(s) {
return pattern.a.map(function (_, lineNo) {
return s.split('').map(function(letter) {
if (!pattern[letter]) letter = '?' // default
return pattern[letter][lineNo];
}).join(' ');
}).join('n');
}
// I/O handling: separated from logic
var input = document.querySelector('input');
// Use pre element to have monospaced font and render all white space
var output = document.querySelector('pre');
input.oninput = function() {
// At every change in the input, generate the output
output.textContent = getOutput(this.value);
}

Input: <input>
<pre></pre>