My goal is to create a program that transitions between prompts and updates on a page in a cyclical manner. However, when I simplify the issue to just two append calls and two prompts, I notice that the page only visually updates after the second prompt call. The reason behind this desire is somewhat abstract, as I aim to mimic a terminal-like experience where the user inputs information intermittently. Below is an example, adapted from w3c schools, that illustrates this problem:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The prompt() Method</h2>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let person = prompt("Please enter your name", "Prompt1");
if (person != null) {
document.getElementById("demo").insertAdjacentHTML('beforeend', "Test1\n");
}
person = prompt("Please enter your name", "Prompt2")
if (person != null) {
document.getElementById("demo").insertAdjacentHTML('beforeend', "Test2\n");
}
}
</script>
</body>
</html>
My desired outcome is for the first insertAdjacentHTML call to update the DOM and visually reflect on the page before the second prompt appears, allowing the user to see their input. However, in reality, I notice that "Test1" and "Test2" appear visually at the same time after the second prompt. While console logging works as intended, it is not suitable for my current application.
I have tried various methods to address this issue (e.g., attempting to trigger a layout with a scroll call, using requestAnimationFrame), but I have not yet discovered a technique that achieves the desired result. One hypothesis I have is that the second prompt is executed before the next frame, causing it to block any new rendering. Regardless of whether this hypothesis is accurate, I welcome any suggestions on achieving the desired behavior.
Ideally, I would like to see Test1 displayed on the page, followed by the second prompt, and then Test2, assuming the user selects the default options.