JavaScript　テキストボックスに文字を入力しボタンをクリックすると、入力された文字が2秒ごとに先頭から1文字ずつ順番に表示されるプログラムを作成したい

該当のソースコード

<!DOCTYPE html>
<html>
<head lang="ja">
	<meta charset="UTF-8">
	<title>課題(中級)</title>
	<script type="text/javascript">
			
		function add_element(e) {
			e.preventDefault();
			//イベント動作を停止
			var text_box = document.getElementById('text_box').value;
			//text_boxの値を取得
			var element_p = document.createElement('p');
			//p要素の作成
			element_p.innerHTML = text_box;
			//作成したp要素の内容を設定
			box.appendChild(element_p);
			//div要素に作成したp要素を追加
		}


		window.onload = function() {
			var osu = document.getElementById('osu');
			osu.addEventListener('click', add_element, false,)
		}

	</script>
</head>

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

試したこと

div要素に文字が追加されるボタンは作成できましたが、一文字ずつ表示させる方法がどうしても分からないです。

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

回答2件

setInterval()またはsetTimeout()を利用すると良いです。

例：

※「javascript 一文字ずつ」で検索すると結構でてきます。考えて分からないことはよくあるので「言語名　やりたいこと」で検索してみましょう

投稿2019/05/29 00:07

編集2019/05/29 00:19

m.ts10806

総合スコア80886

maisumakun

2019/05/29 00:18

setTimeoutのoは小文字です。

m.ts10806

2019/05/29 00:19

ご指摘ありがとうございます。調整しました。

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

こんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  document.querySelector('#osu').addEventListener('click',function(e){
4    const box = document.querySelector('#box');
5    const text_box_value = document.querySelector('#text_box').value;
6    box.textContent="";
7    const timerId=setInterval(function(){
8      const txt=text_box_value.substr(0,box.textContent.length+1);
9      box.textContent=txt;
10      if(txt==text_box_value) clearInterval(timerId);
11    },500);
12  });
13});
14</script>
15<form>
16<input type="text" id="text_box" value="順番に文字を表示">　<button type="button" id="osu">一文字ずつ表示</button>
17</form>
18<div id="box"></div>