Javascript 为什么我会得到这个错误；太多的递归；？

我正在做一个小项目，我得到了一个信息“递归太多了”，而显然没有那么多

这是相关的HTML代码

<div id="speed">
    <label for="spe">Input speed</label>
    <input type="text" id="spe" onkeydown="if (event.keyCode == 13){ javascript:CalcBySpeed(); return false; }" />
    <input type="button" name="Sumbit" value="Submit" onclick="javascript:CalcBySpeed()" />
</div>

输入速度

还有一张桌子，通常看起来像这样：

<tr>
    <td id="50">
        <p id="117">5</p>
    </td>
    <td id="51">
        <p id="118">20</p>
    </td>
    <td id="52">
        <p id="119">5</p>
    </td>
    <td id="53">
        <p id="120">1,2</p>
    </td>
</tr>

5
20
5
1,2

我的JavaScript函数是：

function CalcBySpeed() {
    var input = "a";
    input = parseFloat(document.getElementById("spe").value) * 100;
    if (input < 5089) {
        getValueBySpeed(input - 3);
    } else {
        alert("Value undefined!");
    }
};

function getValueBySpeed(input) {
    if (document.getElementById(input) != null) {
        document.getElementById(input).style.backgroundColor = "yellow";
        document.getElementById(input + 1).style.backgroundColor = "yellow";
        document.getElementById(input + 2).style.backgroundColor = "yellow";
        document.getElementById(input + 3).style.backgroundColor = "yellow";
        document.getElementById("res1").innerHTML = document.getElementById(input + 3).innerHTML;
        document.getElementById("res2").innerHTML = document.getElementById(input + 2).innerHTML;
        document.getElementById("res3").innerHTML = document.getElementById(input + 1).innerHTML;
        document.getElementById("res4").innerHTML = document.getElementById(input).innerHTML;
    } else {
        getValueBySpeed(input++);
    }
}

函数CalcBySpeed（）{
var input=“a”；
输入=parseFloat（document.getElementById（“spe”）.value）*100；
如果（输入<5089）{
getValueBySpeed（输入-3）；
}否则{
警报（“值未定义！”）；
}
};
函数getValueBySpeed（输入）{
if（document.getElementById（输入）！=null）{
document.getElementById（输入）.style.backgroundColor=“黄色”；
document.getElementById（输入+1）.style.backgroundColor=“黄色”；
document.getElementById（输入+2）.style.backgroundColor=“黄色”；
document.getElementById（输入+3）.style.backgroundColor=“黄色”；
document.getElementById（“res1”）.innerHTML=document.getElementById（输入+3）.innerHTML；
document.getElementById（“res2”）.innerHTML=document.getElementById（输入+2）.innerHTML；
document.getElementById（“res3”）.innerHTML=document.getElementById（输入+1）.innerHTML；
document.getElementById（“res4”）.innerHTML=document.getElementById（输入）.innerHTML；
}否则{
getValueBySpeed（输入++）；
}
}

因此，如果我决定在输入字段中输入：

• 1.2

  ，js成功突出显示了这一行

• 1.19

  js成功突出显示了同一行

• 0.97

  js成功高亮显示同一行

然而，当我输入：

• 1.1

  它在控制台中登录

  递归太多

我相信当我输入

0.97

时会有更多的递归，但问题是当我输入介于

1.09

和

1.16

之间的数字时

在这个范围之外，似乎没有问题

显然没有那么多

显然有；）

您的代码中可能有错误：

function getValueBySpeed(input) {
    if (document.getElementById(input) != null) {
        ...
    }
    else {
        getValueBySpeed(input++);
    }
}

如果

document.getElementById（输入）！=null

是

false

它很可能会保持

false

，函数

getValueBySpeed

将被调用，直到您得到递归错误

---

作为一个小提示：我不明白

getValueBySpeed

做了什么，名称很奇怪，参数很奇怪，实现很奇怪

我可能会期望（根据名称）：

---

后缀增量返回原始值，因此使用相同的值重复调用函数。也就是说，不需要递归，使用循环。这是一个粗略的尝试，但是你的代码对我来说没有什么意义，所以我可能弄错了

function CalcBySpeed() 
{ 
    var input = "a";
    input = parseFloat(document.getElementById("spe").value)*100; 
    if (input < 5089) {
        getValueBySpeed(input-3);
    } else {
        alert("Value undefined!");
    }
};
function getValueBySpeed(input) {
    while (document.getElementById(input) == null)
        input++;

    document.getElementById(input).style.backgroundColor = "yellow";
    document.getElementById(input + 1).style.backgroundColor = "yellow";
    document.getElementById(input + 2).style.backgroundColor = "yellow";
    document.getElementById(input + 3).style.backgroundColor = "yellow";
    document.getElementById("res1").innerHTML = document.getElementById(input + 3).innerHTML;
    document.getElementById("res2").innerHTML = document.getElementById(input + 2).innerHTML;
    document.getElementById("res3").innerHTML = document.getElementById(input + 1).innerHTML;
    document.getElementById("res4").innerHTML = document.getElementById(input).innerHTML;
}

函数CalcBySpeed（）
{ 
var input=“a”；
输入=parseFloat（document.getElementById（“spe”）.value）*100；
如果（输入<5089）{
getValueBySpeed（输入-3）；
}否则{
警报（“值未定义！”）；
}
};
函数getValueBySpeed（输入）{
while（document.getElementById（输入）==null）
输入++；
document.getElementById（输入）.style.backgroundColor=“黄色”；
document.getElementById（输入+1）.style.backgroundColor=“黄色”；
document.getElementById（输入+2）.style.backgroundColor=“黄色”；
document.getElementById（输入+3）.style.backgroundColor=“黄色”；
document.getElementById（“res1”）.innerHTML=document.getElementById（输入+3）.innerHTML；
document.getElementById（“res2”）.innerHTML=document.getElementById（输入+2）.innerHTML；
document.getElementById（“res3”）.innerHTML=document.getElementById（输入+1）.innerHTML；
document.getElementById（“res4”）.innerHTML=document.getElementById（输入）.innerHTML；
}

这是一个舍入问题<代码>1.1*100=110.00000000000001。然后，当您为每个通话添加1时，号码将永远不会是整数。将永远找不到id为xxxx.00000000000001的元素

问题的根源在于1.1不能用双精度浮点数精确表示

---

解决方案是将数字转换为整数。即忽略小数。

这是一个舍入问题<代码>1.1*100=110.00000000000001。然后，当您为每个通话添加1时，号码将永远不会是整数。id为xxxx.00000000000001的元素将永远找不到。无论何时使用递归，都不要忘记终止条件。@SaniHuttunen，非常感谢！我将“输入”解析为整数，现在它可以正常工作了！将您的评论作为答案发布，这样我就可以把它作为“最佳答案”：我真的建议您更好地命名函数、参数和变量。“输入”可能应该是“速度”，“getValueBySpeed”不返回任何内容，因此它可能应该是“displayValueForSpeed”（而“Value”可能也应该是更有意义的内容）。“计算速度”，计算什么？根据函数的功能命名，而不是根据它们的用途命名。另外，看在上帝的份上，不要使用onkeydown和onclick html属性——使用标记。@SaniHuttunen:我对后缀增量没有错。的确我的错。咖啡因不够……；）

function CalcBySpeed() 
{ 
    var input = "a";
    input = parseFloat(document.getElementById("spe").value)*100; 
    if (input < 5089) {
        getValueBySpeed(input-3);
    } else {
        alert("Value undefined!");
    }
};
function getValueBySpeed(input) {
    while (document.getElementById(input) == null)
        input++;

    document.getElementById(input).style.backgroundColor = "yellow";
    document.getElementById(input + 1).style.backgroundColor = "yellow";
    document.getElementById(input + 2).style.backgroundColor = "yellow";
    document.getElementById(input + 3).style.backgroundColor = "yellow";
    document.getElementById("res1").innerHTML = document.getElementById(input + 3).innerHTML;
    document.getElementById("res2").innerHTML = document.getElementById(input + 2).innerHTML;
    document.getElementById("res3").innerHTML = document.getElementById(input + 1).innerHTML;
    document.getElementById("res4").innerHTML = document.getElementById(input).innerHTML;
}