experiencing “Uncaught RangeError: Maximum call stack size exceeded”

Question

Functionality:

Am trying to create a quiz with 5 tries whereby each question page is a randomised question displayed from each category.

Hence, if a user gets each question correct, the next question will fadeIn and if the user were to get 3 questions correct within 3 out of 5 tries, they will be navigated to the gameWin page. Else, if users have exhausted all 5 tries, it will navigate the users to a GameOver page.

Issue:

At this point in time, after users have exhausted all 5 tries, the following error msg is displayed in my console.log as => Uncaught RangeError: Maximum call stack size exceeded.

I would like to ask for help on how to rectify the following issue on the call stack size exceeded.

Code:

function showQuestion() {

  //Question list shown is more than 5, show game over
  if (GamePage_question_list.length > 5) {
    GameOver();
  } else {

    //Randomise Each Category Questions

    //Randomise Category_A Question
    random_Question_CategoryA = Math.floor(Math.random() * CategoryA_Questions.length);

    //Randomise Category_B Question
    random_Question_CategoryB = Math.floor(Math.random() * CategoryB_Questions.length);

    //Randomise Category_C Question
    random_Question_CategoryC = Math.floor(Math.random() * CategoryC_Questions.length);

    //Randomise Category_D Question
    random_Question_CategoryD = Math.floor(Math.random() * CategoryD_Questions.length);

    //Display random question
    random_Question = Math.floor(Math.random() * GameQuestion.length);

    var exist = false;

    for (i = 0; i < GamePage_question_list.length; i++) {
      if (GamePage_question_list[i] == (random_Question_CategoryA + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryB + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryC + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryD + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question + "")) {
        exist = true;
      }
    }

    Game_wait = false;

    if (exist == false) {

      //Display Question from each category after each question has been answered
      if (GamePage_question_list.length == 0) {

        console.log("Questions:" + CategoryA_Questions[random_Question_CategoryA]);


        GamePage_question_list.push(random_Question_CategoryA + "");

        $("#GamePage_question").html(CategoryA_Questions[random_Question_CategoryA]);

        answerList = CategoryA_Answers[random_Question_CategoryA];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

        console.log("Answers:" + answerList);

      } else if (GamePage_question_list.length == 1) {

        GamePage_question_list.push(random_Question_CategoryB + "");

        $("#GamePage_question").html(CategoryB_Questions[random_Question_CategoryB]);

        answerList = CategoryB_Answers[random_Question_CategoryB];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 2) {

        GamePage_question_list.push(random_Question_CategoryC + "");

        $("#GamePage_question").html(CategoryC_Questions[random_Question_CategoryC]);

        answerList = CategoryC_Answers[random_Question_CategoryC];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 3) {

        GamePage_question_list.push(random_Question_CategoryD + "");

        $("#GamePage_question").html(CategoryD_Questions[random_Question_CategoryD]);

        answerList = CategoryD_Answers[random_Question_CategoryD];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 4) {

        GamePage_question_list.push(random_Question + "");

        $("#GamePage_question").html(GameQuestion[random_Question]);

        answerList = GameAnswer[random_Question];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);
      }
    } else {
      showQuestion();
    }
  }
}


function select_answer(flag) {

  if (Game_wait == false) {
    Game_wait = true;

    var currentQuestionIndex = GamePage_question_list[GamePage_question_list.length - 1];

    var CategoryA_correctAnswer = CategoryA_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryA_POPUP_Answer = CategoryA_PopUpAnswers[parseInt(currentQuestionIndex)];


    var CategoryB_correctAnswer = CategoryB_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryB_POPUP_Answer = CategoryB_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryC_correctAnswer = CategoryC_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryC_POPUP_Answer = CategoryC_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryD_correctAnswer = CategoryD_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryD_POPUP_Answer = CategoryD_PopUpAnswers[parseInt(currentQuestionIndex)];

    var correctAnswer = GameCorrectAnswer[parseInt(currentQuestionIndex)];
    var POPUP_Answer = GamePopUpAnswer[parseInt(currentQuestionIndex)];

    console.log("flag_answer chosen:" + flag);


    //Show the POPUP Correct answer
    //THIS IS THE PART WHERE THE CORRECT ANSWER WILL SHOW IF THE USER ANSWERS EACH QUESTION WRONGLY

    if (GamePage_question_list.length == 1) {

      console.log("CategoryA_correctAnswer" + CategoryA_correctAnswer);
      console.log("A");

    } else if (GamePage_question_list.length == 2) {

      console.log("CategoryB_correctAnswer" + CategoryB_correctAnswer);
      console.log("B");

    } else if (GamePage_question_list.length == 3) {

      console.log("CategoryC_correctAnswer" + CategoryC_correctAnswer);
      console.log("C");

    } else if (GamePage_question_list.length == 4) {

      console.log("CategoryD_correctAnswer" + CategoryD_correctAnswer);
      console.log("D");

    } else if (GamePage_question_list.length == 5) {

      console.log("GameCorrectAnswer" + GameCorrectAnswer);
      console.log("E");
    }


  }
}


function GameOver() {
  idleTime = 0;

  console.log("GameOver");

  setTimeout(function() {
    location.reload();
  }, 5000);
}

<!-- Original Question -->
<div id="GamePage_question" style="position:absolute; z-index:99; top:460px; left:160px; margin:auto; color:#FFFFFF; font-size:60px; font-family: Calibrib; width:800px; text-align: center;"></div>

<!-- Answer-Original-Choice List -->
<img id="GamePageAnswer_1" style="position:absolute; z-index:3; top:1100px; left:260px; margin:auto;" />
<img id="GamePageAnswer_2" style="position:absolute; z-index:3; top:1300px; left:260px;" />

<!-- Selection answer -->
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:4; top:1100px; left:0px; margin:auto; width:1080px; height:150px; border:1;" onclick="select_answer(1);" />
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:4; top:1300px; left:0px; margin:auto; border:1; width:1080px; height:150px;" onclick="select_answer(2);" />

Its very confusing to look at the complete code. Here is what you can do.. Just have the code that runs when the user answers wrong all the time. That way the code is minimal and we can help better. Also FYI this error occurs when ever there are infinite loops in the code.. — Rajshekar Reddy
Inside showQuestion() if exists == true you call showQuestion() again, this could cause the problem (not necessarily, depending on what happens in that for loop). Try logging exists: console.log(exists). — Jonas Grumann
@Luke Are you sure that GamePage_question_list ever reaches length 6 (i.e. a length > 5 which is what you test before calling GameOver)? Try to analyze the branches where you expand GamePage_question_list and see if there is one where GamePage_question_list.length == 5 can be assured. — FK82

Klaider Klaider · Accepted Answer · 2016-11-21T11:59:23

I basically guess that the else clause here > if (exist == false) causes an same infinite call to showQuestion (as commented by @JonasGrumann) while exist is a value except false (as commented by @Reddy, a call loop causes this RangeError). GamePage_question_list never reaches the sixth length as commented by @FK82, thus the if clause of if (GamePage_question_list.length > 5) never executes, but the else clause, where showQuestion is re-called forever at the else clause of if (exist == false) (I think 5 length should be more programatic here: 4).

The basic solution would be to update this GamePage_question_list.length > 5 condition, where bigger than operator could be >=, or 5 could be 4, checking if the length getter returns a value bigger/than or equal/to 5.

experiencing “Uncaught RangeError: Maximum call stack size exceeded”

1 Answers