JavaScript 斐波那契函数到 HTML 元素？

Question

所以我想开始制作一个基于课程的脚本，但我无法弄清楚为什么我的斐波那契数列函数的输出只有 (0,1)。

function fibonacciGenerator(n){
  var output = [];

  if(n === 1) {
    output = [0];
  }
  else if (n === 2) {
    output = [0, 1];  
    document.getElementsById("nr").innerHTML = output;
  }
  else {
    output = [0, 1];
    for (var i = 2; i < n; i++) {
      output.push(output[output.length - 2] + output[output.length - 1]);
      document.getElementById("result").innerHTML = output;
    }
  }
  return output;
}


function calcButton() {
  document.getElementById('result').innerHTML = fibonacciGenerator();
}

<input id="nr" name="nr" type="number" style="margin: auto; display: flex;">
  <button style="margin: auto; display: flex;" onclick="calcButton()">Calc</button>
  <div style="margin: auto; display: flex;" id="result"></div>

尝试了不同的方法，但我想不通。

Answer 1

@GetSet 的意思是调用你的函数时没有 n

只需将输入值提供给它即可；

function fibonacciGenerator(n){
  var output = [];

  if(n === 1) {
    output = [0];
  }
  else if (n === 2) {
    output = [0, 1];  
    document.getElementsById("nr").innerHTML = output;
  }
  else {
    output = [0, 1];
    for (var i = 2; i < n; i++) {
      output.push(output[output.length - 2] + output[output.length - 1]);
      document.getElementById("result").innerHTML = output;
    }
  }
  return output;
}


function calcButton() {
  let number = document.querySelector('input').value // Get the input's value
  document.getElementById('result').innerHTML = fibonacciGenerator(number); // and feed it to your function
}

<input id="nr" name="nr" type="number" style="margin: auto; display: flex;">
  <button style="margin: auto; display: flex;" onclick="calcButton()">Calc</button>
  <div style="margin: auto; display: flex;" id="result"></div>

Answer 2

问题的根本原因是没有从文本字段中读取输入。可以通过使用“var n = document.getElementById("nr").value”读取输入

来解决问题

这是工作代码，其功能已更新为从文本字段读取输入：

<!DOCTYPE html>
<html>
    <body>
    <h2>Fibonacci series</h2>
    <input id="nr" name="nr" type="number">
    <button onclick="fibonacciGenerator()">Calc</button>
    <div id="result"></div>

    <script>
    function fibonacciGenerator(){
      var n = document.getElementById("nr").value
      
      var output = [];

      if(n === 1) {
          output = [0];
      } else if (n === 2) {
          output = [0, 1];  
          document.getElementsById("nr").innerHTML = output;
      } else {
          output = [0, 1];
          for (var i = 2; i < n; i++) {
              output.push(output[output.length - 2] + output[output.length - 1]);
              document.getElementById("result").innerHTML = output;
          }
      }
      document.getElementById('result').innerHTML = output
    }
    </script>

    </body>
</html>

输出：

JavaScript 斐波那契函数到 HTML 元素？

JavaScript Fibonacci function to HTML element?

html

javascript

fibonacci