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”为止。

此链接应有帮助：

Element: keyup event

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

1 个答案: