セリフの表示が終わったら次のページへ飛ぶリンクをつけたい

Question

###ヘディングのテキスト
スマートフォンゲームのチュートリアルなどでよくある、キャラクターがセリフを喋っているように文字が1つずつ表示され、段落の表示が終わったら右下に矢印が表示され、次の段落文章が表示されるプログラムを作りたく思っています。

先日こちらでご指導いただき、現在以下の状態で
①文章を1文字ずつ表示する
②段落の文章が表示されたら右下に矢印が出る
までは希望通り動いております。

今回は、以下のサンプルで「セリフ３（最終段落）」が表示され終わった時のみ、<a href="">で別のページへ遷移できるようにしたく思います。（セリフ１の時はセリフ２へ、セリフ２の時はセリフ３へ）

よろしくご指導のほどお願い致します。

   <section id="contents">

             <div id="serif_box">
                <p id="serif" data-text="[&quot;セリフ１&quot;,&quot;セリフ２&quot;,&quot;セリフ３&quot;]" data-textindex="-1">
                </p>
                <img id="next_tuto" class="serif_bt" src="/img/serif_bt.png" hidden>
             </div>

    </section>

'use strict';
document.getElementById('next_tuto').addEventListener('click', {
  textElement: document.getElementById('serif'),
  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, 18, element);
      } else {
        this.document.getElementById('next_tuto').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_tuto').click();

Answer 1

aタグ差し込んで{display:none;}つけて最後のセリフの表示がおわったらcallbackで{display:block;}つければいいとおもいます。

差し出がましいかもしれませんがstrictモードを使うのであればletとconstだけでも明確に定義すると幸せになれると思います。

Comments

[tiegr_0196]

回答ありがとうございました。
ご丁寧にありがとうございます。
まだご指摘の意味が理解できない個所がございますので勉強致します。