dialogue

<!DOCTYPE html>
<html>
    <head>
        <title>
            an original title
        </title>
    </head>

    <body bgcolor="#d4efd8">
        <center>
            <br>
            <input type="text" id="textbox" onkeyup="define()">
            <button onclick='clicked()'>dialogue</button>
            <p id="a"></p>
        </center>
        <script>
function define(){
    var text=document.querySelector("#textbox").value
    var table={};
    var subtable={};
    for(let i=0;i<text.split(' ').length;i++){
        table[i.toString()]=text.split(' ')[i]
        setTimeout(()=>{
           for(v=0;v<table[i.toString()].length+1;v++){
              subtable[i.toString()+"_"+v.toString()]=table[i.toString()].substring(v,v-1)
            }
      },25);
    }
}
function clicked(){
    for(a=0;a<text.split(' ').length;a++){
        for(i=0;i<table[(a).toString()].length;i++){
            document.querySelector("#a").innerText=document.querySelector("#a").innerText+(subtable[(a).toString()+'_'+(i+1).toString()])
        }
    }
}
        </script>
    </body>
</html>