如何在 while 循环中显示所有步骤

Question

我正在做一个关于 Collatz 猜想的小项目。

在这个项目中，我想在奇数时应用公式“乘以 3 加一”，在偶数时应用公式。

我想一直循环直到数字为 1，不仅要显示它走了多少步，还要显示它经过的所有数字。

我想我已经走得很远了，但是我无法显示循环经历的所有步骤。

这是我的代码：

    <!DOCTYPE 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>Collatz Conjecture</title>
    <script>

        function findOddEven() {

                var num = document.getElementById('num').value;
                let i = 0;
                while (num !=  1) {
                    if (num % 2 == 0) {
                        num = num / 2; /*even*/
                    } else {
                        num = (num * 3) + 1; /*odd*/
                  console.log(num) }
                    i++
                    document.getElementById('result').innerHTML = "Result is " + num + " found in " + i + " runs";  
                }
            } 
    </script>
</head>

<body>
    <form method="post">
        <small>Number:</small><input type="text" id="num" name="num" min="0" /><input type="button" value="submit"
            onclick="findOddEven()" name="find" />
        <div style="margin-top: 10px;" id="result"></div>
    </form>
</body>

</html>

Answer 1

您的问题是看不到所有数字吗？如果是这样，您的 console.log 在 else 语句中。要查看所有数字，您应将其移到 if else 语句之外。

Answer 2

您可以将数字存储在数组中并在末尾显示。您也可以将 .innerHTML 移出循环，因为这只需要在循环结束时完成。

我已经使用 join 将数组转换为逗号分隔的字符串。

<!DOCTYPE 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>Collatz Conjecture</title>
    <script>
      function findOddEven() {
        var num = document.getElementById('num').value;
        let steps = [num]; // Store starting number
        let i = 0;
        
        while (num != 1) {
          if (num % 2 == 0) {
            num = num / 2; /*even*/
          } else {
            num = num * 3 + 1; /*odd*/
          }
          
          steps.push(num); // Add changed number to the array
          
          i++;
        }
        
        document.getElementById('result').innerHTML =
            'Result is ' + num + ' found in ' + i + ' runs. Steps taken: ' + steps.join(', ');
      }
    </script>
  </head>

  <body>
    <form method="post">
      <small>Number:</small
      ><input type="text" id="num" name="num" min="0" /><input
        type="button"
        value="submit"
        onclick="findOddEven()"
        name="find"
      />
      <div style="margin-top: 10px" id="result"></div>
    </form>
  </body>
</html>

如何在 while 循环中显示所有步骤

How to show all steps in a while loop

javascript

loops

while-loop