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

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

ただいまの
回答率

88.78%

JavaScript テキストボックスに文字を入力しボタンをクリックすると、入力された文字が2秒ごとに先頭から1文字ずつ順番に表示されるプログラムを作成したい

受付中

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 2,339

okushin

score 13

イメージ説明

該当のソースコード

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title>課題(中級)</title>
    <script type="text/javascript">

        function add_element(e) {
            e.preventDefault();
            //イベント動作を停止
            var text_box = document.getElementById('text_box').value;
            //text_boxの値を取得
            var element_p = document.createElement('p');
            //p要素の作成
            element_p.innerHTML = text_box;
            //作成したp要素の内容を設定
            box.appendChild(element_p);
            //div要素に作成したp要素を追加
        }


        window.onload = function() {
            var osu = document.getElementById('osu');
            osu.addEventListener('click', add_element, false,)
        }

    </script>
</head>

<body>
    <form>
        <input type="text" id="text_box"> <button id="osu">一文字ずつ表示</button>
    </form>
    <div id="box"></div>
</body>
</html>

試したこと

div要素に文字が追加されるボタンは作成できましたが、一文字ずつ表示させる方法がどうしても分からないです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+3

setInterval()またはset​Timeout()を利用すると良いです。

例:

※「javascript 一文字ずつ」で検索すると結構でてきます。考えて分からないことはよくあるので「言語名 やりたいこと」で検索してみましょう

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/29 09:18

    setTimeoutのoは小文字です。

    キャンセル

  • 2019/05/29 09:19

    ご指摘ありがとうございます。調整しました。

    キャンセル

+1

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#osu').addEventListener('click',function(e){
    const box = document.querySelector('#box');
    const text_box_value = document.querySelector('#text_box').value;
    box.textContent="";
    const timerId=setInterval(function(){
      const txt=text_box_value.substr(0,box.textContent.length+1);
      box.textContent=txt;
      if(txt==text_box_value) clearInterval(timerId);
    },500);
  });
});
</script>
<form>
<input type="text" id="text_box" value="順番に文字を表示"> <button type="button" id="osu">一文字ずつ表示</button>
</form>
<div id="box"></div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/29 10:41

    ボタンを連続で押すと・・・

    キャンセル

  • 2019/05/29 11:01

    そこは仕様提示がされていないのでなんとも。。。
    ・表示が終わるまで押せなくするか
    ・押すたびに先頭から処理しなおすか
    ・その他

    キャンセル

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

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

関連した質問

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

  • トップ
  • JavaScriptに関する質問
  • JavaScript テキストボックスに文字を入力しボタンをクリックすると、入力された文字が2秒ごとに先頭から1文字ずつ順番に表示されるプログラムを作成したい