"," expected等のエラーを解消し、ページの読み込み時に文字が１文字ずつ表示されるにしたい。

実現したいこと

"," expected等のエラーを解消し、ページの読み込み時に文字を１文字ずつ表示したい。

前提

id="quiz"にある文章を、1秒毎に1文字ずつに表示したいです。
（例）"おはようございます"という文字を表示するとしたら、まず「お」を表示させて、1秒後に「は」、2秒後に「よ」...8秒後に「す」を表示。

何かアドバイスいただけると嬉しいです。

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

該当のソースコード

wordtest2.html
1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <meta http-equiv="X-UA-Compatible" content="IE=edge">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <title>Document</title>
8    </head>
9    <body onload="myFunction()">
10        <p id="quiz">ここに文字が順に表示されていきます</p>
11    </body>
12    <script>    
13        function myFunction(){
14            let arr = document.getElementById("quiz").innerText
15            let count = 0
16            const timerId = setInterval(dis(arr,count){
17                count = count + 1
18                if(count == arr.length){ 
19                    clearInterval(timerId);
20                }        
21            },1000);
22        }
23
24        function dis(arr,count){
25            document.write(arr[count])
26        }
27    </script>
28</html>

試したこと

エラーからは","が足りない等が推測できますが、どの部分に入れればいいかが分かりません。

・setInterval()の説明サイト
https://developer.mozilla.org/ja/docs/Web/API/setInterval
・clearInterval()の説明サイト
https://developer.mozilla.org/ja/docs/Web/API/clearInterval
・setInterval()とclearInterval()を利用したサンプルが載っているサイト
https://pisuke-code.com/js-stoo-or-resume-setinterval/

以上の３つや他の色々なサイトを見たのですが解決方法が分かりませんでした。

【補足】
説明不足で申し訳ございません。
１度表示した文字は消えないようにお願いしたいです。
（例）「おはようございます」の「お」を表示してから「す」まで表示し終わった際、今まで表示した「おはようございます」が全て残ったままにしていただきたいです。

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

回答1件

ベストアンサー

こんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const ans="おはようございます";
4  let count = 0;
5  const timerId = setInterval(()=>{
6    quiz.textContent=ans.substr(count,1);
7    count++;
8    if(count >= ans.length){ 
9      clearInterval(timerId);
10    }
11  },1000);
12});
13</script>
14<p id="quiz"></p>