JavaScript斐波那契函数异常：输入数值莫名放大10倍求排查

你的问题根源非常典型——从输入框获取的value默认是字符串类型，而非数字类型，这直接导致了后续运算的意外行为。

具体原因分析 #

当你输入1时，document.getElementById("numb").value返回的是字符串"1"，而不是数字1。此时执行n + 1，JavaScript会触发字符串拼接逻辑，得到结果"11"。

循环条件i < n + 1会把字符串"11"隐式转换为数字11，所以循环会从i=0一直执行到i=10，总共11次迭代，最终生成11个数列元素。同理，输入2时会得到"2"+1="21"，循环执行21次，生成21个元素。

修复方案 #

只需要在获取输入值时，将其转换为数字类型即可，这里提供三种常用的转换方式，任选其一即可：

1. 使用parseInt（推荐指定十进制基数，避免八进制解析问题）：

var n = parseInt(document.getElementById("numb").value, 10);

2. 使用Number构造函数：

var n = Number(document.getElementById("numb").value);

3. 使用一元加号运算符：

var n = +document.getElementById("numb").value;

修复后的完整代码 #

function fibo(){ 
    // 这里是关键的类型转换修改
    var n = parseInt(document.getElementById("numb").value, 10); 
    console.log(n); 
    var r=[]; 
    var i; 
    if (isNaN(n) || n < 1 || n > 10) { 
        document.getElementById("ex1").innerHTML = "Input not valid"; 
    } else { 
        for (i = 0; i < n + 1; i++) { 
            console.log(i); 
            console.log(r); 
            if (i == 0){ 
                r[i] = i; 
            } else if (i == 1){ 
                r[i] = i; 
            } else{ 
                r[i] = r[i - 1] + r[i - 2]; 
            } 
        } 
        document.getElementById("ex1").innerHTML = r.toString(); 
    } 
} 

<!DOCTYPE html> 
<html> 
<body> 
<h2>Fibonacci</h2> 
<p>Please input a number between 1 and 10:</p> 
<input id="numb"> 
<button type="button" onclick="fibo()">Calculate Fibo</button> 
<p id="ex1"></p> 
</body> 
</html>

额外小提示 #

另外注意：当前你的循环条件是i < n + 1，意味着输入n=1会生成包含0,1两个元素的数列。如果你希望输入n就生成n个元素，可以把循环条件改为i < n，并调整初始的斐波那契逻辑（比如从i=1开始，或者修改初始值），这个可以根据你的需求灵活调整。

内容的提问来源于stack exchange，提问作者Sandro Norim