title: changing javascript element before finishing button handler
body: <p>I would like to change the content of a paragraph while the button handler is running rather than waiting for the button handler to finish. Here is my code:</p>
  
  <pre><code>Output: &lt;p id="output"&gt;&lt;/p&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="button" onclick="buttonPressed()" value="submit" id="button"&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;script&gt;
  
      function buttonPressed(){
          console.log("output 2")
          document.getElementById("output").innerHTML = "output 1"
  
          while (true){
              // doing something that takes a long time
          }
  
      }
  
      console.log("output 1")
      document.getElementById("output").innerHTML = "output 1"
  
  &lt;/script&gt;
  </code></pre>
  
  <p>upon pressing the button I would like the output to read "output 2" rather than having to wait for the button handler to finish. I have a while true in the button handler to demonstrate this, in reality I won't have a while true but rather some kind of process that takes a while. I would like to let the user know that this process has begun and that they should wait for it to finish.</p>
  
  <p>Thanks for the help</p>