How to show all steps in a while loop

I’m working on a small project about the Collatz conjecture.

In this project i want to apply the formula ” times 3 plus one” when the number is odd and devide a number when its even.

i want to keep looping this until the number is 1 and show not only how many steps it took but also display all the numbers it goes through.

i’ve gotten quite far i think but i have trouble displaying all the steps the loop goes through.

here is my code:

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

You can store the numbers in the array and display them at the end. You can also move the .innerHTML out of the loop since this only needs to be done when the loop is finished.

I’ve used join to turn the array into a comma seperated string.

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