前提・実現したいこと

ここに質問の内容を詳しく書いてください。
テキストボックスに文字を入力しボタンをクリックすると、入力された文字が2秒ごとに先頭から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(0,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>

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

m.ts10806

2019/08/09 00:25

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown

m.ts10806

2019/08/09 00:26

あと「表示がされない」のはおおよそ構文エラーがあって処理が中断しているものと思われます。ブラウザ開発ツールのコンソールにエラーが出ていませんか？確認して追記してください。 https://teratail.com/help/question-tips#questionTips3-4

m.ts10806

2019/08/09 00:36

というか、今のままのコードでも動くように見えます。マークダウン対応次第ですが、JavaScriptコード内に全角スペースとか入っているのではないでしょうか。

gentaro

2019/08/09 01:13

どっかで見た質問だなと思ったら https://teratail.com/questions/198917 と同じだなコレ。

gentaro

2019/08/09 01:16

なんの課題か知らないけど、正直これぐらい自力で解けないような教材使って勉強してるなら、教材変えたほうが良いんじゃないかと思いますが。

m.ts10806

2019/08/09 01:41

>課題の指示通りの表現なるほど。

m.ts10806

2019/08/09 01:42

でも今回、提示されたコードで動きますからね。コードブロック対応してもらうか、デバッグしてもらうしかありません。

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

回答1件

今風に

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#words').addEventListener('click',async ()=>{
4    var msg = document.querySelector("#message").value.split("");
5    for(var x of msg){
6      document.querySelector("#box").textContent+=x;
7      await new Promise(resolve=>setTimeout(()=>resolve(),2000));
8    };
9  });
10});
11</script>
12<form>
13<input type="text" id="message">
14<input type="button" id="words" value="1文字ずつ表示">
15<div id="box"></div>
16</form>

interval処理

javascript
1<script>
2var timerId;
3window.addEventListener('DOMContentLoaded', ()=>{
4  document.querySelector('#words').addEventListener('click',e=>{
5    var btn=e.target;
6    btn.disabled=true;
7    var msg = document.querySelector("#message").value.split("");
8    var box= document.querySelector("#box");
9    box.textContent="";
10    var len1= msg.length;
11    clearInterval(timerId);
12    timerId=setInterval((function hoge(){
13      var len2= box.textContent.length;
14      if(len1<=len2){
15        clearInterval(timerId);
16        btn.disabled=false;
17      }else{
18        box.textContent+=msg[len2];
19        return hoge;
20      }
21    })(),500);
22  });
23});
24</script>
25<form>
26<input type="text" id="message">
27<input type="button" id="words" value="1文字ずつ表示">
28<div id="box"></div>
29</form>