title: Why is while loop running before html DOM assignment in javascript?
body: <p>In Below, why does while loop run before document.body.style.backgroundColor assignment?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log("loadded");
  
  const btn = document.getElementById("button");
  
  btn.addEventListener("click", () =&gt; {
    document.body.style.backgroundColor = "red";
    const start = Date.now();
    const delaySeconds = 10;
    while (Date.now() &lt; start + delaySeconds * 1000) {}
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="button"&gt;test&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>