Trying to display elements in an array based off user input

Question

I am trying to make a program which will display a user string input as a 5x5 matrix of x's. So if the user inputs "abc", the resulting output should be for the first row:

Expected output

I currently only have made it available for a,b and c to be displayed but will expand it to every letter in the alphabet once code is working.

I made an array for each row which contains the characters required to make a letter in each row.

So if a user enters in abc the program will split the input into an array of characters ['a','b','c'] and then count the length of the input (3). A while loop starts which will check to see what letter the first element of the user input is and will match it with the correct element within the alphaRow1 array and print it. The while loop will repeat this until it has gone through every element in the user input.

I currently have only attempted the code for the first row, but will add the other rows later.

Everytime I enter in the user input it comes up with the alphaRow1 element for 'a', regardless if I enter in 'b' or'c'. The while loop appears to repeat correctly so if I enter in abc, it will display the alphaRow1 element for 'a' 3 times:

Actual output when user input is "abc"

I am not sure what is going wrong so that it only displays the first element everytime. The while loop appears to be correct and it appears to be incrementing correctly

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

There is an error in your if and else statements. You are using the assignment operator = when you should be using equality operator ==

Answer 2

The problem with your code is that you should use double == the if`s inside the while loop.

You are actually overriding the values in the if and else if statements.

Answer 3

Apart from the assignments you are doing in the if condition, you should also avoid using document.write . Instead build a string as the result, and handle the actual output to the page separately. For that you could use a pre element, and then set its textContent property to the resulting string. pre will also render the newlines and use a mono-spaced font, which is what you need here.

Also, the data structure for the patterns will be easier to use if you key the patterns by the letter they represent, ie create an object with property 'a', that will have as its value the complete pattern for that letter. That way you don't need all those separate if conditions which will run out of hand once you need to cover the whole range of letters and characters available.

Here is the suggested code. Try it out.

 // Define your patterns keyed by the letter first, not by the line var pattern = { a: [" X ", " XX ", " XXX ", "XX", "XX", "XX"], b: ["XXXX ", "XX", "XXXX ", "XX", "XX", "XXXX "], c: [" XXXX", "X ", "X ", "X ", "X ", " XXXX"], '?': [" XXX ", "XX", " 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>