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

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

ただいまの
回答率

90.84%

  • JavaScript

    14255questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 551

tiegr_0196

score 7

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>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • onokatio

    2017/01/17 19:38

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

    キャンセル

  • kei344

    2017/01/18 04:19

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

    キャンセル

  • tiegr_0196

    2017/01/18 09:41

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

    キャンセル

  • think49

    2017/01/24 15:47 編集

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

    キャンセル

回答 2

checkベストアンサー

+1

<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 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/18 09:41

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

    キャンセル

  • 2017/01/24 10:12

    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 />


    キャンセル

  • 2017/01/24 15:45

    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要素を表示してやれば可能です。
    コードを書いてみてそれでもわからなければ、あなたが書いたコードを記載した新しい質問を立てれば誰かが回答してくれるかもしれません。

    キャンセル

  • 2017/01/24 16:13

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/18 09:41

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

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    文字を1文字ずつ表示させるには?

    タイトルの通りです 検索をかけてみたのですが解決に至らなかったので質問させて頂きます 以下は自分で考えたコードです ご指摘お願いします 追記 テキストボックスは使わずにdocu

  • 受付中

    JavaScriptのfunctionについて

    以下のようにコードを書くと ボタンを押せば「Hello World」が表示されますがbuttonが消えてしまいます このHello Worldをbuttonの下に表示するようにする

  • 解決済

    複数のa href=""を生成し、クリックするとその関数自身に変数を渡して関数を再実行させたいのです...

    いつもありがとうございます。 1から10の番号を持つリンクを生成し、クリックするとその番号を表示するだけの関数を書いています。1つの関数で完結するように書ける方法があればご教示下さ

  • 解決済

    JavaScriptでギャラリーを作りたい

    現在JSでギャラリー的なものを作ろうとしています 仕様としては 画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです ですが

  • 受付中

    JSで任意のinnerHTMLを削除したい

    先日同じような質問をさせていただいたのですが初心者の私にはとても難しく理解できなかったのでもう一度質問させていただきます 下記のコードはテキストボックスで受け取った内容をinner

  • 解決済

    JavaScriptの配列で特定の値の時にfor文の中身を書き換える

    JavaScriptの配列で特定の値の時にfor文の中身を書き換える JavaScript初心者です。よろしくお願い致します。 JavaScriptでformから配列を作成して

  • 解決済

    フォームに入力した文字の正誤判定をするには

    漢字クイズをつくっています。 出題された漢字のよみがなをフォームに入力し、エンターなどを押さなくても正解が入力された時点で「正解」の文字が出るようにしたいのですが、よみがなを入力

  • 解決済

    フォームでエンターを押すと初期状態に戻ってしまう

    漢字クイズを作っています。 出題された漢字の読み仮名をフォームにすると次の問題が表示される、というものなのですが、フォーム上でエンターを押すと何故かスタートの状態に戻ってしまいま

同じタグがついた質問を見る

  • JavaScript

    14255questions

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

  • トップ
  • JavaScriptに関する質問
  • javascriptで1文字ずつ表示させ、文字列全体の表示が完了したら次の文字列が表示(または指定先へリンク)する方法