Javascriptでinputに書き込まれた内容を取得し、１文字ずつ表示させるため

inputに書き込まれた内容を取得し、１文字ずつ指定した秒数で表示させるプログラムを書きたいのですが、エラーが出てしまいます。
※何行も追記するプログラムではなく、inputから渡された文字を１文字ずつ表示させたいです。

又、今回は取得した文字を配列に入れ、その配列を順に表示させるよう書きたいと思っています。
その点でアドバイス頂けると助かります。

下記のプログラムのまま表示させると、inputに書き込まれた文字数が表示されてしまいます。

よろしくお願いいたします。

<body>
    <input id="text" type="text">
    <button id="button">１文字ずつ表示</button>
    <h1 id="title"></h1>
<script>
    click=()=>{
    let text=document.getElementById('text').value;
    let title=document.getElementById('title');
    let idea=[];
    idea=text.split("");
    for(let i=0;i<idea.length;i++){
        title.innerHTML=setTimeout(idea[i],1000);
        }
    }

    window.onload=()=>{
        let button=document.getElementById('button');
        button.addEventListener('click',click,false);
    }
</script>
</body>

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

回答2件

タイピングしているような表現であれば、setInterval() と clearInterval() を活用するといいかもしれませんね。

setInterval() は時間指定でカウントでき、clearInterval() で停止できます。

javascript
1const typewrite = str => {
2  let wrote = "";
3  let count = 0;
4  let intervalId = setInterval(()=>{
5    wrote += str.charAt(count++);
6    console.log( wrote );
7    if(wrote.length === str.length) {
8      clearInterval(intervalId); 
9    }
10  }, 200);
11};
12
13typewrite( "sampleText" );

動くサンプル

投稿2019/12/14 10:42

AkitoshiManabe

総合スコア5434

pearl

2019/12/14 12:32

ご回答ありがとうございます！配列に入れてからの展開が知りたかったため、下記の方をベストアンサーにさせて頂きました、、、

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

ベストアンサー

###回答
以下を修正すれば、できると思います。

(1) idea配列はclickイベントの外で定義.
➡clickイベントの度に配列が初期されないように．．．

(2) clickイベントの度にidea配列の末尾にtextを追加.

(3) idea配列をタグ化する.

(4) innerHtmlでタグを流し込む.

以下、修正後のコードです。ご参考までに。

<body>
    <input id="text" type="text">
    <button id="button">１文字ずつ表示</button>
    <h1 id="title">aaaaaaa</h1>
<script>
    let idea=[]; //配列はclickの外で定義
    click=()=>{
      let text=document.getElementById('text').value;
      let title=document.getElementById('title');
      let tag = ""; //HTMLタグ生成用
      idea.push(text); //テキストを配列にプッシュ
      for(let i=0;i<idea.length;i++){
            tag = tag + idea[i] + "<br>"; //タグ生成：改行付加
      }
      title.innerHTML=tag; //HTMLに反映
    }
    window.onload=()=>{
        let button=document.getElementById('button');
        button.addEventListener('click',click,false);
    }
</script>
</body>

以上です。

###追記
勘違いしており、すいませんでした。
setTimeOutは非同期処理なので、処理が止まらないので、setIntervalで実現できますね。
AkitoshiManabe様が既にご回答されていると思いますが、私も、setIntervalを用いて、作ってみました。

<body>
    <input id="text" type="text">
    <button id="button">１文字ずつ表示</button>
    <h1 id="title"></h1>
  <script>
      let idea=[]; //文字格納配列
      var index = 0; //ループ変数

      click=()=>{
          let text = document.getElementById('text').value;
          idea=text.split(""); //入力テキストを配列化
          var id = setInterval(function(){
              display_word(); //繰返し実行する関数指定
              if(index > idea.length-1){　//setIntervalを止める条件
                  clearInterval(id);
              }
          }, 100); //100msecごとにdisplay_word()を実施
          index=0; //初期化
      }
      //1文字表示する関数
      var display_word = function(){
          let title = document.getElementById('title');
          title.innerHTML+=idea[index]
          index++
      }

      window.onload=()=>{
          let button=document.getElementById('button');
          button.addEventListener('click',click,false);
      }
  </script>
</body>

以上です。

投稿2019/12/14 05:20

編集2019/12/14 11:12

KazuSaka

総合スコア640

pearl

2019/12/14 09:10

ご回答ありがとうございます！！質問の仕方が悪かったかもしれないのですが、頂いたコードですと、１行ずつ追記していくプログラムかと思います。今回実施したいのは、例えばinputに「明日は晴れる」と入力し、ボタンを押すと、指定した秒数で１文字ずつ表示される（先ず"明"が表示されその次に"日"、その次に"は"...のように表示される）プログラムになります。お手数ですが、こちらの表示の仕方についてご教示頂きたいです、、、