#Maximum call stack sized exceeded, but I'm not doing recursive things.

15 messages · Page 1 of 1 (latest)

pastel night
#

So I'm trying to make a form for people to buy stuff in a game using in-game currency but I keep getting this error:

Uncaught RangeError: Maximum call stack size exceeded
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)
    at HTMLInputElement.onclick (index.html:28:75)

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Buy item # - Payment Info</title>
    <link rel="stylesheet" href="buy/style.css">
  <script src="buy/index.js"></script>
</head>
<body>
    <form>
        <h1>Payment Info - Buy item #</h1>
        <!-- unimportant stuff -->
        <input type="submit" id="buybutton" value="Buy Now" onclick="onclick()"> <!-- error -->
    </form>
</body>
</html>
dull summit
#

I think we need to see the onclick Javascript function definition

pastel night
#

for now i just send a webhook to see if it works and it didnt send anything (i will also use the webhook for logging payments to see if ppl are doing sus stuff

function onclick() {
  //vars for the stuff in html, nothing fancy

  const webhookURL = "https://discord.com/api/webhooks/1117392444355514408/g2sf0cP2VE_cjePN2eylg8SjQ-NBgP1TyJ9eTkdXpsTPHtHnOc0DHQ2wIZ6Xl3shKDkl";

  const params = {
    content: "test"
    username: `payment for # made by #`, //adding that later
    attachments: []
  };

  fetch(webhookURL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(params)
  })
    .then(response => {
      if (response.ok) {
        // Request successful
        console.log("Data sent successfully");
      } else {
        // Request failed
        console.log("Error sending data");
        throw new Error("Request failed");
      }
    })
    .catch(error => {
      console.error("An error occurred:", error);
    });

  //adding the payment logic later
}
#

thats the only thing in index.js

sharp torrent
#

Your fetch call works but you don't recognize the order thing going here. Let me explain:

  1. You have a form with an input of type submit what triggers the submit event of the form.
  2. If you trigger the submit event the normal behavior is that the site will be reloaded.
  3. You gave the input of type submit an onclick handler which will executed if the input is clicked but don't stop the normal behavior of the form.

What this means, is your function executes the fetch request at first and then immediately the submit of the form which triggers the reload and your fetch result is gone.

Here a simple fix for your function:

function onClick(event) {
  event.preventDefault();
  event.stopPropagination();

  // here your original code
}

Also it will be a better choice, to remove the onclick handler from the input of type submit and place it on the form itself as an onsubmit handler.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Buy item # - Payment Info</title>
    <link rel="stylesheet" href="buy/style.css">
  <script src="buy/index.js"></script>
</head>
<body>
    <form onsubmit="onclick()">
        <h1>Payment Info - Buy item #</h1>
        <!-- unimportant stuff -->
        <input type="submit" id="buybutton" value="Buy Now">
    </form>
</body>
</html>
pastel night
#

i suddenly get "onclick is not a function" even though i literally got index.js

#

i double checked that it is "onclick" and not "onClick"

#

i'll try putting onclick to the button

#

update: i got "maximum stack size exceeded" when i put onclick to the button

#

ok i renamed function to onClick and it works

#

caught TypeError: event.stopPropagination is not a function

#

ill try to comment that out

sharp torrent
#

Oh yes, there was something with this inline listeners, where you can access them, so its clear while exceeded the maximum stack size, you trigger this ever and ever by a click.

I misspelled stopPropagation, my fault. Here is the documentation for this.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Event: stopPropagation() method - Web APIs | MDN

The stopPropagation() method of the Event
interface prevents further propagation of the current event in the capturing and
bubbling phases. It does not, however, prevent any default behaviors from occurring; for
instance, clicks on links are still processed. If you want to stop those behaviors, see
the preventDefault() method. It also do...

hollow monolith