1文字ずつ順番に表示されるプログラム

タイトル通り一文字ずつ表示させたいですけど
なぜか一文字ずつ字が消えて行きます。

どうすれば正常に一文字ずつ表示されるのか
教えてください。
よろしくお願いします。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>中級</title>
    <script>
       
        
        var msg_count = 0;
        
        
        function text_display() {
            var box = document.getElementById("box");
            var message = document.getElementById("message");
            var msg = message.value;
            
            msg_count++
            
            box.innerHTML = msg.slice(msg_count);
            
        }       
       
        function button() {
            setInterval(text_display,2000);
        }
           
        window.onload = function() {
            var button_clicked = document.getElementById("words");
            button_clicked.addEventListener("click",button,false);
        }

    </script>
    </head>
    <body>
        <form name="Myform">
            <input type=text id="message">
            <input type=button id="words" value="1文字ずつ表示">
            <div id=box></div>
        </form>
    </body>
</html>

kei344

2016/05/14 14:57

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

chucky

2016/05/14 15:05

すいません。初心者なんで何をおっしゃっているのか理解ができないです。すいません。

kei344

2016/05/14 15:07

質問文の編集画面内で、コードを選択し、「</>」ボタンを押す、という作業をして欲しいと書いています。

kei344

2016/05/14 15:13

編集画面に「B I A」などボタンが有るのが見えますか？その並びに「</>」ボタンがあります。テキストで囲むなら「改行＋```＋改行」をコード前後に入れてください。

chucky

2016/05/14 15:19

多分できたと思います。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1box.innerHTML = msg.slice(0,msg_count);

でどうでしょうか

投稿2016/05/14 15:24

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

1文字ずつ順番に表示されるプログラム

関連した質問