teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

修正

2019/12/14 11:12

投稿

KazuSaka
KazuSaka

スコア640

answer CHANGED
@@ -62,13 +62,13 @@
62
62
  if(index > idea.length-1){ //setIntervalを止める条件
63
63
  clearInterval(id);
64
64
  }
65
- }, 1000); //1秒ごとにdisplay_word()を実施
65
+ }, 100); //100msecごとにdisplay_word()を実施
66
66
  index=0; //初期化
67
67
  }
68
68
  //1文字表示する関数
69
69
  var display_word = function(){
70
70
  let title = document.getElementById('title');
71
- title.innerHTML=idea[index]
71
+ title.innerHTML+=idea[index]
72
72
  index++
73
73
  }
74
74
 
@@ -78,7 +78,6 @@
78
78
  }
79
79
  </script>
80
80
  </body>
81
-
82
81
  ```
83
82
 
84
83
  以上です。

1

追記

2019/12/14 11:12

投稿

KazuSaka
KazuSaka

スコア640

answer CHANGED
@@ -37,6 +37,48 @@
37
37
  </body>
38
38
 
39
39
  ```
40
+ 以上です。
40
41
 
41
42
 
43
+ ###追記
44
+ 勘違いしており、すいませんでした。
45
+ setTimeOutは非同期処理なので、処理が止まらないので、setIntervalで実現できますね。
46
+ AkitoshiManabe様が既にご回答されていると思いますが、私も、setIntervalを用いて、作ってみました。
47
+
48
+ ```
49
+ <body>
50
+ <input id="text" type="text">
51
+ <button id="button">1文字ずつ表示</button>
52
+ <h1 id="title"></h1>
53
+ <script>
54
+ let idea=[]; //文字格納配列
55
+ var index = 0; //ループ変数
56
+
57
+ click=()=>{
58
+ let text = document.getElementById('text').value;
59
+ idea=text.split(""); //入力テキストを配列化
60
+ var id = setInterval(function(){
61
+ display_word(); //繰返し実行する関数指定
62
+ if(index > idea.length-1){ //setIntervalを止める条件
63
+ clearInterval(id);
64
+ }
65
+ }, 1000); //1秒ごとにdisplay_word()を実施
66
+ index=0; //初期化
67
+ }
68
+ //1文字表示する関数
69
+ var display_word = function(){
70
+ let title = document.getElementById('title');
71
+ title.innerHTML=idea[index]
72
+ index++
73
+ }
74
+
75
+ window.onload=()=>{
76
+ let button=document.getElementById('button');
77
+ button.addEventListener('click',click,false);
78
+ }
79
+ </script>
80
+ </body>
81
+
82
+ ```
83
+
42
84
  以上です。