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

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>

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>

Share Improve this question edited Dec 14, 2018 at 4:06 asked Dec 14, 2018 at 2:37 J V 351 gold badge1 silver badge5 bronze badges

when does the error happen? I ask because nothing I see here should cause that error. what is in your onload() function? – Katie.Sun Commented Dec 14, 2018 at 2:54
I copied it from somewhere, it was used to add the "add favorite button" – J V Commented Dec 14, 2018 at 3: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 Commented Dec 14, 2018 at 3: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 Commented Dec 14, 2018 at 3:10
onload (games.html:93) means it is your onload function that's causing this – Katie.Sun Commented Dec 14, 2018 at 3:11

| Show 6 more comments

2 Answers 2

Sorted by: Reset to default 11

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>

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!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

2 Answers 2

与本文相关的文章

评论列表(0)