javascriptで1文字ずつ表示させ、文字列全体の表示が完了したら次の文字列が表示（または指定先へリンク）する方法

Question

javascriptで1文字ずつ表示させ、文字列全体の表示が完了したら
アイコンのようなものがタップできるようにし、次の文字列が表示（または指定先へリンク）されるようなものを考えております。イメージはスマートフォンゲームによくあるチュートリアルのイメージです。

以下のコードで1文字ずつ表示はできましたが、
表示完了後に次の文字列を表示させるためにタップ出来るようにする方法が分かりません。
よろしくお願いします。

<script type="text/javascript"> var speed = 200;//表示スピード var index = 0;//表示する文字のindex var words; //表示する文字列 var read; window.onload = function(){ read = document.getElementById("read"); words = read.innerHTML; read.innerHTML = ""; read.style.display = "block"; for (var i = 0; i < words.length; i++){ setTimeout(readWord, speed * (i+1)); } } function readWord(){ if(words == null || words.length == 0){ return ; } if(words.charAt(index).match(/(\n|\r|\r\n)/g)){ read.innerHTML += "&ltbr />"; }else{ read.innerHTML += words.charAt(index); } ++index; } </script>

Comments

[退会済みユーザー]

jsだけではなく、htmlの全体を掲載してください。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[tiegr_0196]

回答、ご指導ありがとうございました。

[think49]

マルチポスト先URIを書いておきます。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10169331000
teratailではマルチポストは非推奨です。
https://teratail.com/help

Answer 1

• 文字列を1文字ずつインターバルを置いて表示する - JSFiddle

<p id="text" data-text="[&quot;Hello, World!&quot;,&quot;Hello, DOM!&quot;,&quot;Hello, JavaScript!&quot;]" data-textindex="-1"></p>
<input id="next" type="button" value="next" hidden />
<script>
'use strict';
document.getElementById('next').addEventListener('click', {
  textElement: document.getElementById('text'),
  viewText: function viewText () {
    setTimeout(function handleTimeout (element) {
      var textList = JSON.parse(element.getAttribute('data-text')),
          listIndex = +element.getAttribute('data-textindex'),
          text = element.textContent,
          originalText = textList[listIndex],
          textLen = text.length + 1;

      element.textContent = originalText.slice(0, textLen);

      if (originalText.length > textLen) {
        setTimeout(handleTimeout, 200, element);
      } else {
        this.document.getElementById('next').hidden = false;
      }
    }, 200, this.textElement);
  },
  handleEvent: function handleClick (event) {
    var element = this.textElement,
        textList = JSON.parse(element.getAttribute('data-text'));

    element.setAttribute('data-textindex', (+element.getAttribute('data-textindex') + 1) % textList.length);
    element.textContent = '';
    this.viewText();
  }
}, false);
document.getElementById('next').click();
</script>

Re: tiegr_0196 さん

Comments

[tiegr_0196]

回答ありがとうございました。

[tiegr_0196]

think49さま
先日は上記ご回答大変ありがとうございました。
失礼ながら追加ご教授をいただけませんでしょうか？

以下構文で、&quot;&quot;間に表示された文字が表示され終わったら次へボタンが表示され次の&quot;&quot;のテキストが表示されるのはそのままで、最後の文章が表示された際（下の例であれば「Hello, JavaScript!」）のみ、別のページへのリンクを追記させる仕様にすることはできるものでしょうか？お手数をおかけ致しますがよろしくお願い致します。
<p id="text" data-text="[&quot;Hello, World!&quot;,&quot;Hello, DOM!&quot;,&quot;Hello, JavaScript!&quot;]" data-textindex="-1"></p>
<input id="next" type="button" value="next" hidden />

[think49]

To: tiegr_0196 さん
まず、「全てのマルチポスト先」でマルチポスト先URIを開示し、解決方法を書いた上でマルチポスト先の質問をクローズして下さい。
マルチポストは回答者に対して大変失礼な行為です。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10169331000
teratailではマルチポストは非推奨であり、マルチポストしてしまった場合の対処法がヘルプに書かれています。
https://teratail.com/help

> 最後の文章が表示された際（下の例であれば「Hello, JavaScript!」）のみ、別のページへのリンクを追記させる仕様にすることはできるものでしょうか？
listIndex === textList.length - 1 が成立した時に document.getElementById('next').hidden と同じ手法でa要素を表示してやれば可能です。
コードを書いてみてそれでもわからなければ、あなたが書いたコードを記載した新しい質問を立てれば誰かが回答してくれるかもしれません。

[tiegr_0196]

ご返答ありがとうございます。
またご指導大変ありがとうございました。
ルールが分からず失礼いたしました。
マルチポスト先は先程クローズさせていただきました。

Answer 2

方法として一番簡単なものは、「aタグをタップさせたいタイミングで表示させ、aタグのonclickに表示を再開する関数を登録する」方法だと思われます。

Comments

[tiegr_0196]

回答ありがとうございました。