setIntervalを使って文字を一文字ずつ表示させたいです。
発生している問題・エラーメッセージ
ページの読み込みが完了したら
一文字ずつ文字を表示させて、繰り返しなしの状態にしたいのですが、うまくいきません。
教えていただけたら幸いです。
該当のソースコード
html
1 <script> 2 var interval_id; 3 var start_flag = false; 4 var num = 1; 5 function start_flash_text() { 6 if (start_flag === false) { 7 interval_id = setInterval(flash_text, 1000); 8 start_flag = true; 9 } 10 } 11 function flash_text(){ 12 var text = document.getElementById('text'); 13 var box = document.getElementById('box'); 14 box.innerHTML = text.substr(0,num); 15 num++; 16 if (box.innerHTML === text) { 17 stop_flash_text(); 18 } 19 } 20 function stop_flash_text() { 21 clearInterval(interval_id); 22 start_flag = false; 23 num = 1; 24 } 25 window.onload = start_flash_text; 26 </script> 27</head> 28<body> 29 <p id="text">一文字ずつ表示</p> 30 <div id="box"></div> 31</body>
試したこと
<p>要素の前に<div>要素を持ってきて、 <div id="text"><p>一文字ずつ表示</p></div> にしてみましたが、 box.innerHTML = text.substr(0,num); の部分でエラー表示されてしまいます。補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
同じような要件の質問を以前みたことがあります。「何がどううまくいかないのか」 含めて探してみては。あとコードはマークダウンのcode機能を利用してください
回答2件
あなたの回答
tips
プレビュー