如何防止我的while循环只输出一个结果？

Question

我使用JavaScript that循环打印出小于40的Fibonacci系列数字。当我执行cosole.log()时，我得到了所需的数字，但由于某种原因，当试图将结果绑定到div时，它只是打印出最后一个数字(34)。有什么容易解决的办法吗？谢谢

​

let choice = document.getElementById('sequence').value;
let num1 = 0,
  num2 = 1,
  next;
let fibonacciSequenceText;

if (choice == "fibonacci") {

  while (num1 < 40) {
    fibonacciSequenceText = num1 + ", ";
    next = num1 + num2;
    num1 = num2;
    num2 = next;
    console.log(fibonacciSequenceText);

  }

  document.getElementById('results').innerHTML = fibonacciSequenceText;

}

<select id="sequence" class="drop-down-menu">
  <option value="select;">Select--</option>
  <option value="fibonacci">Fibonacci Sequence</option>
  <option value="even">Even Numbers</option>
  <option value="odd">Odd Numbers</option>
</select>

​

Answer 1

您应该使用字符串连接来构建一个字符串，而不是在每次迭代中对变量进行重新排序。

fibonacciSequenceText += num1 + ", ";

还请注意使用空字符串初始化fibonacciSequenceText，否则在结果中第一个条目将未定义。

let fibonacciSequenceText = "";

​

document.getElementById('sequence').addEventListener('change',function(){
let choice = document.getElementById('sequence').value;
let num1 = 0,
  num2 = 1,
  next;
let fibonacciSequenceText = "";

if (choice == "fibonacci") {
  while (num1 < 40) {
    fibonacciSequenceText += num1 + ", ";
    next = num1 + num2;
    num1 = num2;
    num2 = next;


  }

  document.getElementById('results').innerHTML = fibonacciSequenceText;

}
})

<select id="sequence" class="drop-down-menu">
  <option value="select;">Select--</option>
  <option value="fibonacci">Fibonacci Sequence</option>
  <option value="even">Even Numbers</option>
  <option value="odd">Odd Numbers</option>
</select>

<div id="results"></div>

​

Answer 2

在每次迭代中都要覆盖变量。请按以下方式声明变量：

let fibonacciSequenceText = "";

然后在while循环中尝试以下操作：

fibonacciSequenceText += num1 + ", ";

这样，您将在每次迭代中将相应的数字添加到变量中，而不是覆盖它。

Answer 3

使用数组代替和join()。例如：

​

let choice = document.getElementById('sequence');
let num1 = 0,
  num2 = 1,
  next;
let fibonacciSequenceText = [];

choice.addEventListener('change',(e) => {
if (e.target.value == "fibonacci") {

  while (num1 < 40) {
    fibonacciSequenceText.push(num1);
    next = num1 + num2;
    num1 = num2;
    num2 = next;
    console.log(fibonacciSequenceText);

  }

  document.getElementById('results').innerHTML = fibonacciSequenceText.join(',');

}
});

<select id="sequence" class="drop-down-menu">
  <option value="select;">Select--</option>
  <option value="fibonacci">Fibonacci Sequence</option>
  <option value="even">Even Numbers</option>
  <option value="odd">Odd Numbers</option>
</select>
<div id="results"></div>

​