質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

867閲覧

JavaScriptのsetIntervalを使って文字を一文字ずつ表示させたいです。

mai1128

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/11/09 09:54

編集2018/11/09 10:35

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/09 10:01

同じような要件の質問を以前みたことがあります。「何がどううまくいかないのか」 含めて探してみては。あとコードはマークダウンのcode機能を利用してください
guest

回答2

0

ベストアンサー

textではp#text(HTMLParagraphElementと思う)になるのでテキストは取れないですinnerTextで取得しないとだめです。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<script> 6 var interval_id; 7 var start_flag = false; 8 var num = 1; 9 var str = '一文字ずつ表示'; 10 function start_flash_text() { 11 if (start_flag === false) { 12 interval_id = setInterval(flash_text, 1000); 13 start_flag = true; 14 } 15 } 16 function flash_text(){ 17 var box = document.getElementById('box'); 18 box.innerText = str.substr(0,num); 19 num++; 20 if (box.innerText === str) { 21 stop_flash_text(); 22 } 23 } 24 function stop_flash_text() { 25 clearInterval(interval_id); 26 start_flag = false; 27 num = 1; 28 } 29 window.onload = start_flash_text; 30</script> 31</head> 32<body> 33<div id="box"></div> 34</body> 35</html>

投稿2018/11/09 10:02

編集2018/11/09 10:45
rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mai1128

2018/11/09 10:32

見辛い質問ですみません!! やってみたらできました!ありがとうございます。 あと、もう一つ質問よろしいでしょうか?このコードだと、まず全文で一文字ずつ表示と表示された後に、 その下に新しく一文字ずつ文が表示されてしまうことに今気づきました。 これの解決方法を教えて頂けたら幸いです。質問ばかりですみません。
guest

0

setIntervalではなくsetTimeoutを使っていいなら、以下のような方法もあります。

HTML

1<html> 2<head> 3 <meta charset="utf-8"> 4 <script> 5 window.onload = () => { 6 const str = "一文字ずつ表示"; 7 const box = document.querySelector("#box"); 8 setTimeout(function flashText(pos = 1) { 9 if (pos === str.length + 1) return; 10 box.textContent = str.slice(0, pos++); 11 setTimeout(() => flashText(pos), 1000); 12 }, 1000); 13 } 14 </script> 15</head> 16<body> 17 <div id="box"></div> 18</body> 19</html>

投稿2018/11/09 12:22

編集2018/11/09 14:19
root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問