实现Collatz考拉兹猜想代码运行无输出无报错，求排查解决

错误原因梳理 #

• 初始变量i获取的是ID为solvebtn的按钮DOM对象，而非输入框中用户输入的数值，DOM对象与数字1做大小比较结果永远为假，所以while循环一次都不会执行，自然没有日志输出也不会报错
• 考拉兹规则的计算逻辑仅执行了运算表达式，没有将结果重新赋值给变量i，即使循环能进入也会因为i的值永远不变导致死循环
• 未将输入框的字符串类型内容转换为数字类型，直接参与计算会出现非预期结果
• JS脚本放在head标签内加载时，页面DOM还未渲染完成，直接执行document.getElementById会获取到null值

修正后代码 #

HTML代码 #

<html lang="en">
<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>3X + 1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" id="numInput" placeholder="Number">
    <button id="solvebtn" onclick="solve()">Solve</button>
    <!-- 脚本放body末尾，确保DOM加载完成 -->
    <script src="app.js"></script>
</body>
</html>

JS代码 #

function solve() {
    // 每次点击时获取输入框内容，转换为数字类型
    let num = Number(document.getElementById("numInput").value);
    // 输入合法性校验
    if(isNaN(num) || num < 1 || !Number.isInteger(num)) {
        console.log("请输入大于等于1的正整数");
        return;
    }
    while(num > 1) {
        // 偶数处理
        if(num % 2 === 0) {
            num = num / 2;
        } 
        // 奇数处理
        else {
            num = num * 3 + 1;
        }
        console.log(num);
    }
}

/* RULES */
//if odd i * 3 + 1
//if even i / 2

内容的提问来源于stack exchange，提问作者Wesley Smith