Javascript 在继续循环之前使用值更新页面

我已经创建了一些代码，根据整数是偶数还是奇数，将输入的数字向上或向下舍入。我已经解决了这个问题，但是现在我想将我的代码放入一个循环中，该循环将持续提示用户输入另一个数字，直到他们输入像“x”这样的值

我希望页面在再次提示用户之前用计算出的值进行更新。我还不知道如何做到这一点，因此我在这里提出问题

有没有办法做到这一点，或者我的做法完全错了

Javascript:

function main() {
    var n = prompt("Enter A Number\nCan Be A Whole Number Or Decimal Number With One Decimal Place.\nOr Enter x To Exit.");
        while (n != "x") {
            var nn = 0
            if (n.includes(".")) {
                var n = parseFloat(n);
                q = Math.trunc(n);
                if (q % 5 == 0) {
                    if ((n % 1) >= 0.5) {
                        nn = (Math.ceil(n));
                    } else if ((n % 1) < 0.5) {
                        nn = (Math.floor(n));
                    }
                } else {
                    if ((n % 1) <= 0.5) {
                        nn = (Math.floor(n));
                    } else if ((n % 1) > 0.5) {
                        nn = (Math.ceil(n));
                }
            }

            document.getElementById("orgNum").innerHTML = "Original Number: " + n;
            document.getElementById("roundNum").innerHTML = "Rounded Number: " + nn
            setTimeout(main, 5000);
        } else {
            document.getElementById("orgNum").innerHTML = "Original Number: " + n;
            document.getElementById("roundNum").innerHTML = "Rounded Number: Whole Number Was Entered."
            setTimeout(main, 5000);


    }
    setTimeout(main, 5000);
    var n = prompt("Enter Another Number\nCan Be A Whole Number Or Decimal Number With One Decimal Place.\nOr Enter x To Exit.")

    }

函数main（）{
var n=prompt（“输入一个数字\n可以是一个整数或一位小数。\n也可以输入x退出”）；
而（n！=“x”）{
var nn=0
如果（n.包括（“.”）{
var n=parseFloat（n）；
q=数学真值（n）；
如果（q%5==0）{
如果（（n%1）>=0.5）{
nn=（Math.ceil（n））；
}如果（（n%1）<0.5）{
nn=（数学层（n））；
}
}否则{
如果（（n%1）0.5）{
nn=（Math.ceil（n））；
}
}
document.getElementById（“orgNum”）.innerHTML=“原始编号：”+n；
document.getElementById（“roundNum”）.innerHTML=“舍入的数字：”+nn
设置超时（主，5000）；
}否则{
document.getElementById（“orgNum”）.innerHTML=“原始编号：”+n；
document.getElementById（“roundNum”）.innerHTML=“四舍五入数字：输入了整数。”
设置超时（主，5000）；
}
设置超时（主，5000）；
var n=prompt（“输入另一个数字\n可以是带一个小数位的整数或小数位。\n也可以输入x退出。”）
}

}

HTML:

原始编号：

四舍五入的数字：

我错过了什么

---

任何帮助都将不胜感激。

浏览器中的Javascript与ui一起在单个线程中运行。在代码尝试执行时，通过循环接管该线程将阻止ui正常工作，包括允许用户在输入中输入文本

您需要使用事件侦听器，而不是while循环

您可以将onkeyup事件侦听器附加到输入，以查找enter键（keycode 13），或者将输入放入表单并将onsubmit事件侦听器附加到表单

此事件侦听器将在输入字段中查找“x”字符：如果找到它，您就完成了（您可以隐藏输入和/或在页面上显示一条消息，指示不再需要输入）

如果找不到x，请进行舍入并清除输入值。执行舍入/清除后，用户将能够输入另一个值，按enter键，这将再次触发事件侦听器，依此类推，直到检测到“x”

此链接应有助于：

---

浏览器中的Javascript与ui一起在单个线程中运行。在代码尝试执行时，通过循环接管该线程将阻止ui正常工作，包括允许用户在输入中输入文本

您需要使用事件侦听器，而不是while循环

您可以将onkeyup事件侦听器附加到输入，以查找enter键（keycode 13），或者将输入放入表单并将onsubmit事件侦听器附加到表单

此事件侦听器将在输入字段中查找“x”字符：如果找到它，您就完成了（您可以隐藏输入和/或在页面上显示一条消息，指示不再需要输入）

如果找不到x，请进行舍入并清除输入值。执行舍入/清除后，用户将能够输入另一个值，按enter键，这将再次触发事件侦听器，依此类推，直到检测到“x”

此链接应有助于：

---

谢谢Mark，我有种感觉，我的代码不能像现在这样使用。添加事件监听器完成了我需要代码完成的工作，所以谢谢。很高兴听到它有所帮助。如果您在编写代码方面需要更多帮助，请告诉我们。谢谢，我有一种感觉，我的代码目前无法使用。添加事件监听器完成了我需要代码完成的工作，所以谢谢。很高兴听到它有所帮助。如果您在编写代码时需要更多帮助，请告诉我们

<div id="wrapper">
    <div id="dataEntry">
        <input type="button" id="subButton" value="Begin" onClick="main()">
    </div>
    <div id="dataPrint">
        <p id="orgNum">Original Number: </p>
        <p id="roundNum">Rounded Number: </p>
    </div>
</div>