回答編集履歴

2

修正

2019/12/14 11:12

投稿

KazuSaka
KazuSaka

スコア640

test CHANGED
@@ -126,7 +126,7 @@
126
126
 
127
127
  }
128
128
 
129
- }, 1000); //1秒ごとにdisplay_word()を実施
129
+ }, 100); //100msecごとにdisplay_word()を実施
130
130
 
131
131
  index=0; //初期化
132
132
 
@@ -138,7 +138,7 @@
138
138
 
139
139
  let title = document.getElementById('title');
140
140
 
141
- title.innerHTML=idea[index]
141
+ title.innerHTML+=idea[index]
142
142
 
143
143
  index++
144
144
 
@@ -158,8 +158,6 @@
158
158
 
159
159
  </body>
160
160
 
161
-
162
-
163
161
  ```
164
162
 
165
163
 

1

追記

2019/12/14 11:12

投稿

KazuSaka
KazuSaka

スコア640

test CHANGED
@@ -76,8 +76,92 @@
76
76
 
77
77
  ```
78
78
 
79
+ 以上です。
79
80
 
80
81
 
81
82
 
82
83
 
84
+
85
+ ###追記
86
+
87
+ 勘違いしており、すいませんでした。
88
+
89
+ setTimeOutは非同期処理なので、処理が止まらないので、setIntervalで実現できますね。
90
+
91
+ AkitoshiManabe様が既にご回答されていると思いますが、私も、setIntervalを用いて、作ってみました。
92
+
93
+
94
+
95
+ ```
96
+
97
+ <body>
98
+
99
+ <input id="text" type="text">
100
+
101
+ <button id="button">1文字ずつ表示</button>
102
+
103
+ <h1 id="title"></h1>
104
+
105
+ <script>
106
+
107
+ let idea=[]; //文字格納配列
108
+
109
+ var index = 0; //ループ変数
110
+
111
+
112
+
113
+ click=()=>{
114
+
115
+ let text = document.getElementById('text').value;
116
+
117
+ idea=text.split(""); //入力テキストを配列化
118
+
119
+ var id = setInterval(function(){
120
+
121
+ display_word(); //繰返し実行する関数指定
122
+
123
+ if(index > idea.length-1){ //setIntervalを止める条件
124
+
125
+ clearInterval(id);
126
+
127
+ }
128
+
129
+ }, 1000); //1秒ごとにdisplay_word()を実施
130
+
131
+ index=0; //初期化
132
+
133
+ }
134
+
135
+ //1文字表示する関数
136
+
137
+ var display_word = function(){
138
+
139
+ let title = document.getElementById('title');
140
+
141
+ title.innerHTML=idea[index]
142
+
143
+ index++
144
+
145
+ }
146
+
147
+
148
+
149
+ window.onload=()=>{
150
+
151
+ let button=document.getElementById('button');
152
+
153
+ button.addEventListener('click',click,false);
154
+
155
+ }
156
+
157
+ </script>
158
+
159
+ </body>
160
+
161
+
162
+
163
+ ```
164
+
165
+
166
+
83
167
  以上です。