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

Question

我创建了一些代码，可以向上或向下舍入输入的数字，具体取决于整数是偶数还是奇数。我已经解决了这个问题，但是现在我想将我的代码放入一个循环中，该循环将不断提示用户输入另一个数字，直到他们输入像“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.")

    }

}

HTML：

<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>

我在这里缺少什么？

任何帮助将不胜感激。

Answer 1

浏览器中的 Javascript 与 ui 一起在单个线程中运行。使用循环接管该线程，正如您的代码尝试执行的那样，将阻止 ui 运行，包括允许用户在输入中输入文本。您需要使用事件侦听器，而不是您的 while 循环。您可以将 onkeyup 事件侦听器附加到您的输入，它会查找输入键（键码 13），或者将您的输入放入一个表单并将 onsubmit 事件侦听器附加到该表单。此事件侦听器将在输入字段中查找“x”字符：如果找到，则完成（您可以隐藏输入和/或在页面上放置一条消息，指示不再需要输入）。如果找不到 x，请进行四舍五入并清除输入值。完成舍入/清除后，用户将能够输入另一个值，按 Enter 键，这将再次触发事件侦听器，依此类推，直到检测到“x”。