CODEWITHSUNDEEP
javascript
J V
J V

Reputation: 35

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>

Upvotes: 3

Views: 44271

Answers (2)

Elharony
Elharony

Reputation: 981

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!

Upvotes: 5

Adrian Brand
Adrian Brand

Reputation: 21638

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>

Upvotes: 11

Related Questions