javascript - Why do I get the error "Too much recursion"? - Stack Overflow

admin管理员组

文章数量:1352882

I'm working on a small project here and I get this message "too much recursion", when obviously there's not that much.

This is the relevant HTML code

<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>

and a table, generally looking like this:

<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>

And my JavaScript functions are:

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++);
    }
}

So if I decide to input in my input field:

• 1.2, js highlights this particular row successfully
• 1.19 js highlights the very same row successfully
• 0.97 js highlights the same row successfully

However when I input:

• 1.1 it logs in the console too much recursion

I believe when I input 0.97 there is much more recursion, still the problem is when I input numbers between 1.09 and 1.16.

Outside this range there seems to be no problem.

I'm working on a small project here and I get this message "too much recursion", when obviously there's not that much.

This is the relevant HTML code

<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>

and a table, generally looking like this:

<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>

And my JavaScript functions are:

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++);
    }
}

So if I decide to input in my input field:

• 1.2, js highlights this particular row successfully
• 1.19 js highlights the very same row successfully
• 0.97 js highlights the same row successfully

However when I input:

• 1.1 it logs in the console too much recursion

I believe when I input 0.97 there is much more recursion, still the problem is when I input numbers between 1.09 and 1.16.

Outside this range there seems to be no problem.

• javascript
• html
• firefox
• recursion

Share Improve this question Follow edited Jan 16, 2014 at 16:55 Nope 22.3k88 gold badges4949 silver badges7373 bronze badges asked Jan 16, 2014 at 16:48 user2997637user2997637 4711 silver badge66 bronze badges 4

• This is a rounding problem. 1.1 * 100 = 110.00000000000001. Then when you're adding 1 for each call the number will never be an integer. An element with the id xxxx.00000000000001 will never be found. – Sani Huttunen Commented Jan 16, 2014 at 16:55
• Whenever you use recursion don't forget about termination condition. – Givi Commented Jan 16, 2014 at 17:07
• 1 @SaniHuttunen, Thank you very much! I parsed "input" to integer and now it works properly! Post your ment as an answer, so I can pick it up as the "Best answer" :d – user2997637 Commented Jan 16, 2014 at 17:17
• I'd really suggest doing a better job naming your functions, parameters, and variables. "input" should probably be "speed", "getValueBySpeed" doesn't return anything, so it should probably be "displayValueForSpeed" (and "Value" should probably be something more meaninful too). "CalcBySpeed", calculate what? Name your functions based on what they do, not what they're used for. Also, for the love of god, don't use the onkeydown and onclick html attributes - use a <script> tag. – B T Commented Jul 7, 2014 at 8:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

when obviously there's not that much.

obviously there is ;)

There is probably a mistake in your code:

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

If document.getElementById(input) != null is false it will likely stay false and the function getValueBySpeed will be called until you get the recursion error.

---

As a minor note: I don't understand what getValueBySpeed does, the name is weird, the arguments are weird, the implementation is weird.

I would expect perhaps (based on the name):

function getValueBySpeed(speed) {
    var value;
    value = // get value somehow
    return value;
}

This is a rounding problem. 1.1 * 100 = 110.00000000000001. Then when you're adding 1 for each call the number will never be an integer. An element with the id xxxx.00000000000001 will never be found. 

The root of the problem is that 1.1 cannot be represented accurately with double precision floating point numbers.

The solution is the convert the number to an integer. I.e disregard the decimal value.

The postfix increment returns the original value, so you are calling your function repeatedly with the same value. That said, you don't need recursion, use a loop. Here is a rough attempt, but your code made little sense to me, so I may have gotten it wrong...

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;
}

本文标签： javascriptWhy do I get the error quotToo much recursionquotStack Overflow