What's a maximum call stack size exceeded error and how to fix it?

Question

I was trying to make a list where the user can add his or her favorites. But then I got a "maximum call stack size exceeded" error.

What is that and how do I fix it?

I'd appreciate the help, thank youuu

Here are the codes that I used:

    <body onload="onload();">
        <!--for everything in the navigation part including the add favorite bar-->
        <div class="topnav">
            <!--links to the other pages-->
            <a class="active" href="home.html">Home</a>
            <a href="games.html">Games</a>
            <a href="movies.html">Movies</a>
            <a href="series.html">TV Series</a> 
            <a href="books.html">Books</a>

            <!--for the add favorite button-->
            <div class="addFave">
                <!--the text bar-->
                <input type="text" name="enter" class="enter" value="" id="added"  placeholder= "Add Favorites"/>
                <!--the enter button-->
                <input type="button" value="Enter" id = "addIt" OnClick="adding()" />
                <!--for the script of the add favorite bar to add its functions-->
                <script type="text/javascript">
                    var faves = [];

                    var y = document.getElementById("added");
                        function adding() {
                            faves.push(y.value);
                            document.getElementById("faveLists").innerHTML = faves;
                        }
                    var input = document.getElementById("added");
                        input.addEventListener("keyup", function(event) {
                            event.preventDefault();
                            if (event.keyCode === 13) {
                            document.getElementById("addIt").click();
                        }
                    }); 
                </script>
            </div>
        </div>




        <!--for the additional texts-->
        <div class="list">
            <!--where the user input in the add favorite bar will appear-->
            <p id = "faveLists"></p>
        </div>
    </body>
</html>

when does the error happen? I ask because nothing I see here should cause that error. what is in your `onload()` function? — Katie.Sun, Dec 14 '18 at 02:54
I copied it from somewhere, it was used to add the "add favorite button" — J V, Dec 14 '18 at 03:00
Ok. well I have tried the code you posted here, and it works. I am lead to believe the problem lies elsewhere — Katie.Sun, Dec 14 '18 at 03:02
Oh I see. But when I run it on google it gives me this games.html:93 Uncaught RangeError: Maximum call stack size exceeded at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) at onload (games.html:93) — J V, Dec 14 '18 at 03:10
`onload (games.html:93)` means it is your `onload` function that's causing this — Katie.Sun, Dec 14 '18 at 03:11

Adrian Brand · Answer 1 · 2018-12-14T03:53:26.240

So you have come to StackOverflow to ask what a stack overflow is?

Distilling it down to just the onload it is still happening. Onload is calling itself in an unending recursive loop causing a stack overflow.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="onload();">

    </body>
</html>

But adding an onload function fixes it.

<!DOCTYPE html>
<html>
    <head>
      <script>
        function onload() {
          console.log('Onload called');
        }
      </script>
    </head>
    <body onload="onload();">

    </body>
</html>

Elharony · Accepted Answer · 2018-12-14T03:55:26.947

3

The Maximum call stack size exceeded. appears when you enter something like an infinite loop of function!

Check a better example here

In your <body> you are typing: onload="onload();" and that's the reason of your problem because onload is calling itself, over and over. Try to remove it from your code, and the error will be disappeared.

Welcome to StackOverflow!

edited Dec 14 '18 at 03:55

answered Dec 14 '18 at 03:50

Elharony

886
8
18

Is it not needed? I just used it since i copied it from someone and thanks – J V Dec 14 '18 at 03:52
It's okay to copy others, most of us do it, but you need to understand what you are copying... In your case, there is no need for it at all! :) – Elharony Dec 14 '18 at 03:53
oh I see, it's gone now. Thank you :) – J V Dec 14 '18 at 03:56
and may i ask one more thing? – J V Dec 14 '18 at 03:57
You're welcome. If you find it helpful, select it as the correct answer, so that it gets pinned! – Elharony Dec 14 '18 at 03:57
If it's related to the answer, yes sure! But, if it isn't, I suggest you to create another question as it would be more helpful for newcomers who might search for it! – Elharony Dec 14 '18 at 03:59
An infinite loop will not cause a stack overflow. while (true) {} is not placing anything on the stack. – Adrian Brand Mar 16 '22 at 22:28

What's a maximum call stack size exceeded error and how to fix it?

2 Answers2