テキストボックスに入力した文章を、ボックス外に一文字ずつ二秒ごとに増やして表示したい

前提・実現したいこと

javascriptで、【テキストボックスに入力した文章を、ボックス外に一文字ずつ二秒ごとに増やして表示する】処理がしたいです。
可能であれば、基本的にこの形を残したまま実現したいのですが、いかがでしょうか。
宜しくお願いいたします。

発生している問題・エラーメッセージ

cleateElement要素を入れると文章全体が二秒ごとに表示されてしまうが、入れないと表示そのものがされない。
というより、function view_second内のif文が効いていないようです。

該当のソースコード

<!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>課題中級</title> <script> //テキストボックスに文字を入力しボタンをクリックする //入力された文字が文字が２秒ごとに先頭から１文字ずつ順番に //表示されるプログラムを作成する var counter=1;

        function view_second() {
            var element_p = document.createElement('p');
            var str = document.getElementById('str').value;
            element_p.innerHTML = str.value;
            var box = document.getElementById('box');

　　　　　　　　　box.appendChild(element_p);
var i =0;
if(counter <= str.length){
box.innnerHTML = str.substring(0,counter);
counter++;
}//ここのif文が意味ない？

        }

        
        function timing(){
        setInterval(view_second,2000);
        }
        
        window.onload = function () {
            var neon = document.getElementById('neon');
            neon.addEventListener('click',timing,false);
        }

    </script>
</head>
<body>
    <input type="text" id="str" value="順番に文字を表示">
    <button id="neon">1文字ずつ表示</button>
    <div id="box"></div>
</body>

</html>

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

setIntervalをどうやって止める気なのかわかりませんが

JavaScript
1var counter=0;
2
3function view_second() {
4  var str = document.getElementById('str').value;
5  if(counter <= str.length){
6    var element_p = document.createElement('p');
7    element_p.innerHTML = str.substring(counter, counter +1);
8
9    var box = document.getElementById('box');
10    box.appendChild(element_p);
11    counter++;
12  }
13}