如何在while循环中展示全部步骤：Collatz猜想项目开发问题

原代码核心问题 #

• 从输入框获取的数值为字符串类型，未转换为数字格式，可能引发运算逻辑异常
• 每次循环直接覆盖结果区域内容，未存储中间运算数值，无法展示完整流程
• 仅在奇数运算分支打印日志，偶数分支的中间数值未被记录
• 初始输入的原始数值未被纳入运算流程展示范围

修正后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collatz猜想计算器</title>
    <script>
        function calcCollatz() {
            const inputVal = document.getElementById('num').value.trim();
            // 校验输入是否为正整数
            if (!/^[1-9]\d*$/.test(inputVal)) {
                document.getElementById('result').innerHTML = "请输入有效的正整数";
                return;
            }
            let currentNum = parseInt(inputVal);
            // 存储所有运算步骤，初始值加入数组
            const stepList = [currentNum];
            let stepCount = 0;
            while (currentNum !== 1) {
                if (currentNum % 2 === 0) {
                    currentNum = currentNum / 2;
                } else {
                    currentNum = currentNum * 3 + 1;
                }
                stepList.push(currentNum);
                stepCount++;
            }
            // 拼接输出内容，包含全步骤和总步数
            document.getElementById('result').innerHTML = `
                运算全步骤：${stepList.join(' → ')}<br>
                总运算步数：${stepCount}
            `;
        } 
    </script>
</head>
<body>
    <form method="post">
        <small>输入数字：</small>
        <input type="number" id="num" name="num" min="1" />
        <input type="button" value="计算" onclick="calcCollatz()" name="calcBtn" />
        <div style="margin-top: 10px; line-height: 1.5;" id="result"></div>
    </form>
</body>
</html>

运行效果说明 #

输入任意正整数点击计算后，会完整展示从初始值到1的所有运算过程数值，同时显示总运算步数，额外增加了输入合法性校验，避免非正整数输入引发的逻辑错误。

内容的提问来源于stack exchange，提问作者Nick Sutterland