文字を一文字ずつ二秒間隔で表示

Java scriptでテキストボックス内に書いた文字を二秒間隔で表示させるプログラムを書いたつもりですがうまくいきません。どこがいけないでしょうか？？

エラーメッセージ

リスト------ここに言語を入力 Java Script
コード

###該当のソースコード
```ここに言語を入力
ここにご自身が実行したソースコードを書いてください

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>実行タイミング</title> <script> window.onload=function(){ var button=document.getElementById('button'); button.addEventListener('click',two, false); } function word(){ var n=0; //文字数 var text=document.getElementById('text').value; document.getElementById('box').innerHTML=text.substring(0,n); if(n<text.length){ n++; } else{ var intervalId; clearInterval(intervalId); } }

    function two(){
        intervalId=setInterval(word,2000);
    }
</script>

</head> <body> <input id="text" type="text"> <button id="button">一文字ずつ表示</button> <div id="box"></div> </body> </html>



###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2016/11/02 16:49

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

kei344

2016/11/02 16:56

'''（カンマ3つ）ではなく ```（バッククオート3つ）です。

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

回答2件

ベストアンサー

色々あるとは思いますが、元のコードをなるべくそのままにした状態で書いています。
n,text,intervalIdをword関数内で変数宣言していることが原因で、
wordが実行されるたびに初期化されてしまい、うまく動いていませんでした。
また、nが0から始まっているので、初回実行時はtext.substring(0,0)となり、結果が返ってきません。

javascript
1// 関数外で定義することで全ての関数から参照できるようになる
2var n,text,intervalId;
3window.onload=function(){ 
4  var button=document.getElementById('button'); 
5  button.addEventListener('click',two, false); 
6
7} 
8function word(){ 
9  document.getElementById('box').innerHTML=text.substring(0,n); 
10  if(n<text.length){ 
11    n++; 
12  } else{ 
13    clearInterval(intervalId); 
14  } 
15}
16function two(){   
17  n=1; // 現在の表示文字数
18  text=document.getElementById('text').value; 
19  intervalId=setInterval(word,2000); 
20}

投稿2016/11/02 17:06

編集2016/11/02 17:10

ShoheiTai

総合スコア897

kazoogon

2016/11/02 17:14

回答ありがとうございます！おかげさまでわかりましたが、カウンターというものが何かググってもよくわからないのですが、どういうものなのでしょうか？？

ShoheiTai

2016/11/02 17:19 編集

ソースコード的にループの回数をカウントするものかと思い、カウンターとコメントに書いていましたが、間違いでしたので修正しました。「現在の表示文字数」が正しいです。混乱を招いてしまい申し訳ありません..!

kazoogon

2016/11/02 17:40

これで完全にわかりました！　ありがとうございました！

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

JavaScript
1var n; //文字数
2var intervalId;
3window.onload=function(){
4	var button = document.getElementById( 'button' );
5	button.addEventListener( 'click', two, false );
6}
7function word(){
8	var text = document.getElementById( 'text' ).value;
9	document.getElementById( 'box' ).innerHTML = text.substring( 0, n );
10	if ( n < text.length ) {
11		n++;
12	} else {
13		clearInterval( intervalId );
14	}
15}
16function two() {
17	n = 1;
18	clearInterval( intervalId );
19	intervalId=setInterval( word, 2000 );
20}
21```**動くサンプル：**[https://jsfiddle.net/4qxr3qat/](https://jsfiddle.net/4qxr3qat/)