title: Error on trying skip dialogue on my visual novel engine
body: <p>I'm trying make my own visual novel engine for my game but i has some problem in my code,
  In normally, text is writing like keyword write but when you press on anywhere on screen text complate automaticly. But when i clicked texts will combime and become like random text.</p>
  <p>script.js</p>
  <pre class="lang-js prettyprint-override"><code>import {init} from &quot;./main.js&quot;
  import Dialouge from &quot;./dialogue.js&quot;
  
  let dialogues = [
    &quot;Merhaba buralarda yenisin galiba?&quot;,
    &quot;Tanıtmamı istermisin?&quot;
  ]
  
  const {body,head} = document
  const html = head.parentNode
  init(html,body)
  let d = new Dialouge(body)
  d.create()
  let x = d.updateText(dialogues[0]);
  let i = 1;
  let sp = d.props.charPerSecond
  document.onclick = () =&gt; {
    if (x.lastStatus == false) {
      if (d.props.charPerSecond == sp * 2) return;
      setText({
        charPerSecond: sp * 2
      })
      while(x.lastStatus==false) {}
      setText({
        charPerSecond: sp
      })
    } else {
      x = d.updateText(dialogues[i])
      i++;
    }
  }
  </code></pre>
  <p>main.js</p>
  <pre class="lang-js prettyprint-override"><code>export function init(html,body) {
    html.style.height = body.style.height = &quot;100%&quot;  
  }
  </code></pre>
  <p>dialogue.js</p>
  <pre class="lang-js prettyprint-override"><code>const timer = ms =&gt; new Promise(res =&gt; setTimeout(res, ms))
  
  
  export default class Dialogue {
    #body
    #element
    #inner
    #textP
    constructor(body) {
      this.#body = body
      this.#element = document.createElement(&quot;div&quot;)
      this.#inner = document.createElement(&quot;div&quot;)
      this.#textP = {
        speed: 0.1,
        charPerSecond: 1
      }
      this.lastStatus = true
    }
    get props() {
      return this.#textP
    }
    create() {
      this.#body.style.position = &quot;relative&quot;
      let element = this.#element
      this.#inner.classList.add(&quot;dialouge-inner&quot;)
      element.classList.add(&quot;dialogue&quot;)
      element.append(this.#inner)
      this.#body.append(element)
    }
    setText(data) {
      this.#textP = {
        ...this.#textP,
        ...data
      }
    }
    async updateText (datas) {
      this.lastStatus = false
      return new Promise(async res =&gt; {
        datas = datas.split('')
        this.#inner.innerText = &quot;&quot;
        for (let i in datas) {
          let data = datas.slice(i)
          for (let j = 0; j &lt; this.#textP.charPerSecond; j++) {
            this.#inner.textContent += data[j]
          }
          await timer(this.#textP.speed * 1000);
        }
        this.lastStatus = true
        res()
      })
    }
  }
  </code></pre>
  <p>html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
      &lt;title&gt;replit&lt;/title&gt;
      &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
    &lt;script src=&quot;script.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>css</p>
  <pre class="lang-css prettyprint-override"><code>html,body {
    overflow:hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .dialogue {
    position: absolute;
    padding: 4px;
    background: #000;
    bottom: 1vmin;
    left: 0;
    width: 100%;
    height: 20vmin;
  }
  .dialouge-inner {
    width: 50%;
    height: 95%;
    margin: auto auto;
    background: white;
  }
  </code></pre>