尝试根据用户输入在数组中显示元素答案

【问题标题】：Trying to display elements in an array based off user input尝试根据用户输入在数组中显示元素
【发布时间】：2017-06-29 21:29:29
【问题描述】：

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

Expected output

我目前只为显示 a、b 和 c 提供了它，但一旦代码工作，它将扩展到字母表中的每个字母。

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

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

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

每次我输入用户输入时，它都会为“a”提供 alphaRow1 元素，无论我输入“b”还是“c”。 while 循环似乎可以正确重复，所以如果我输入 abc，它将显示 'a' 的 alphaRow1 元素 3 次：

Actual output when user input is "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");
    }
}

【问题讨论】：

标签： javascript arrays while-loop user-input increment

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的代码的问题是您应该在 while 循环中使用 double == if`s。

您实际上是在覆盖 if 和 else if 语句中的值。

【讨论】：

【解决方案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>

【讨论】：