사용자 입력을 기반으로 배열에 요소를 표시하려고합니다.

Question

사용자 문자열 입력을 x의 5x5 행렬로 표시하는 프로그램을 만들려고합니다. 따라서 사용자 입력 "ABC"는 결과 출력은 첫 번째 행에 대해 할 필요가있는 경우 :

Expected output

나는 현재 단지 것이 가능하게 한

는 B와 C가 표시 될하지만 그것을 확장됩니다 코드가 작동하면 알파벳의 모든 문자가 나타납니다.

각 행에 문자를 만드는 데 필요한 문자가 포함 된 각 행에 대한 배열을 만들었습니다.

사용자가 abc로 입력하면 프로그램은 입력을 문자 배열 [ 'a', 'b', 'c']로 분할 한 다음 입력 길이 (3)를 계산합니다. while 루프가 시작되면 사용자 입력의 첫 번째 요소가 어떤 문자인지 확인하고 alphaRow1 배열의 올바른 요소와 일치시켜 인쇄합니다. while 루프는 사용자 입력의 모든 요소를 ​​통과 할 때까지이 작업을 반복합니다.

나는 현재 첫 번째 행에 대한 코드를 시도했지만 나중에 다른 행을 추가합니다.

사용자 입력에 입력 할 때마다 'b'또는 'c'를 입력해도 관계없이 'a'의 alphaRow1 요소가 나타납니다.

Actual output when user input is "abc"

내가 만 표시하도록 잘못 무슨 일이 일어나고 있는지 확실하지 오전 : while 루프는 내가 ABC에 입력하면, 그것은 '는'3 번에 대한 alphaRow1 요소가 표시됩니다 있도록 제대로 반복 나타납니다 매번 첫 번째 요소. 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 == the`s를 사용해야한다는 것입니다.

실제로 if 및 else if 문에서 값을 재정의합니다.

Answer 3

if 상태에서 수행하는 작업 외에도 document.write을 사용하지 않아야합니다. 대신 문자열을 결과로 만들고 실제 출력을 페이지에 별도로 처리하십시오. 이를 위해 pre 요소를 사용하고 결과 문자열에 textContent 속성을 설정할 수 있습니다. pre은 또한 개행 문자를 렌더링하고 여기에 필요한 단락 간격 글꼴을 사용합니다.

또한 패턴을 나타내는 문자로 패턴을 입력하면 패턴의 데이터 구조가보다 쉽게 ​​사용할 수 있습니다. 예를 들어 특성이 'a'인 객체를 작성하면 그 문자의 완전한 패턴을 값으로 갖게됩니다 . 그런 식으로 사용할 수있는 문자와 문자의 전체 범위를 커버 할 필요가있을 때 손이 다 떨어질 수있는 모든 상황을 별도로 필요로하지 않습니다.

다음은 권장 코드입니다. 그것을 밖으로 시도하십시오.

// 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>