javascriptの計算式が分かりません。

前提・実現したいこと

初心者なので計算式が分かりません。すいません。教えて下さい。
大まかには、teratailと入力すれば、”よくできました！”と表示するプログラムです。そのプログラムに次に押すキーを表示したいです。
次に押すキーとは、例えばteratailの最初の”ｔ”を入力すると、次は”e”を入力下さいと表示するようにしたいです。
".forEach0"に次に押すキーを表示したいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8"/>
5  <title>1</title>
6  <link rel="stylesheet" href="2.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8</head>
9<body>
10  <div class="formIn">teratailと入力下さい。</div>
11  <div class="forEach0"></div>
12  <div class="forEach"></div>
13  <div class="forEach1"></div>
14  <script type="text/javascript" src="2.js"></script>
15</body>
16</html>

javascript
1$( function() {
2    
3    const array1=[];
4    
5    $( document ).keydown(function (e){
6        $( '.forEach' ).text(String.fromCharCode(e.keyCode));
7        array1.push(String.fromCharCode(e.keyCode));
8        console.log(array1);
9        console.log(array1.join(''));
10        $( '.forEach1' ).text(array1.join(''));
11        if(array1.join('')=="TERATAIL"){
12            $('.formIn').text('よくできました！');
13        }
14    });
15    const array2=[];
16    var form="TERATAIL";
17    var result = form.split('');
18    result.forEach((value) => {
19        array2.push(value.charCodeAt(0));
20    });
21    console.log(array2);
22});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

ku__ra__ge

2020/05/25 06:32

質問者であるあなたが、どのような方法で「次に押すべきキー」を表示するのか決めないことには「次に押すべきキー」を求める式を出すことはできません。日本語で、何も考えずに愚直にその手順に従えば「次に押すべきキー」が決められるという手順を書いてください。

Gakut

2020/05/25 06:44

書き込みありがとうございます。依頼が明確でなくて申し訳ございません。大まかには、teratailと入力すれば、”よくできました！”と表示するプログラムです。そのプログラムに次に押すキーを表示したいです。次に押すべきキーとは、例えばteratailの”ｔ”を入力すると、次は”e”を入力下さいと表示するようにしたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

いろいろやりかたはあると思いますが、一例として
・"TERATAIL"という内容を変数に持っておき、最初の文字を「次に押すキー」として表示する
・「次に押すキー」が押されたたら、最初の文字を取り除いて、最初の文字を「次に押すキー」として表示する
という方法が考えられます。

javascript
1$( function() {
2
3    const array1=[];
4
5    $( document ).keydown(function (e){
6        if (e.keyCode == array2[0]) {                                // キー入力された文字が、array2の最初の文字なら
7            array2.shift();                                          // array2の最初の文字を取り除く
8            $( '.forEach0' ).text( String.fromCharCode(array2[0]) ); // 新たにarray2の最初の文字を表示
9        }
10
11        $( '.forEach' ).text(String.fromCharCode(e.keyCode));
12        array1.push(String.fromCharCode(e.keyCode));
13        console.log(array1);
14        console.log(array1.join(''));
15        $( '.forEach1' ).text(array1.join(''));
16        if(array1.join('')=="TERATAIL"){
17            $('.formIn').text('よくできました！');
18        }
19    });
20    const array2=[];
21    var form="TERATAIL";
22    var result = form.split('');
23    result.forEach((value) => {
24        array2.push(value.charCodeAt(0));
25    });
26    console.log(array2);
27    
28    $( '.forEach0' ).text( String.fromCharCode(array2[0]) ); // 初期表示として、array2の最初の文字を表示
29
30});