简体   繁体   中英

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>

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!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM