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

【问题标题】：JavaScript Fibonacci function to HTML element?JavaScript 斐波那契函数到 HTML 元素？
【发布时间】：2021-02-01 23:57:52
【问题描述】：

所以我想开始根据课程制作脚本，但我不明白为什么我的斐波那契数列函数中的输出只有 (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>

尝试了不同的方法，但我无法弄清楚。

【问题讨论】：

一个问题，可能很明显但错过了，你的 fib 函数有一个参数，你没有提供fibonacciGenerator(n)。出于某种原因，您显然决定不在 calcButton() 中向其传递参数。
你这是什么意思？我试过了，结果是一样的
我说它基于一个课程，我想修改它

标签： javascript html fibonacci

【解决方案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>

【讨论】：

好吧，现在我明白了我错过了什么，我的 calc 上的输入值，这就是他的意思，谢谢！

【解决方案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>

输出：

【讨论】：