Error:"Uncaught RangeError: Maximum call stack size exceeded" nested in self function

Question

I keep getting the error "Uncaught RangeError: Maximum call stack size exceeded", and I've narrowed it down to this code:

//Play Button Checking
var checker = false;
var playButton = function(){
    if(mouseX > 100 && mouseX > 300 && mouseY > 150 && mouseY < 250 && mouseIsPressed){
        checker = true;
    } else {
        playButton();
    }
};
while(checker===false){
    playButton();
}

Answer 1

Your function calls itself recursively, unless the mouse conditions in the if statement are true. Since it never updates any of the variables, they'll never become true if they weren't true when the function is initially called.

If you have an event handler that sets these variables, it will never get a chance to run. Javascript is single-threaded, and event handlers only run when your code returns back to the main idle loop of the browser.

If you want something to change when the user presses the mouse button, you should bind a handler to the click or mousedown event on the appropriate element (if it can be anywhere in the document, attach it to the document element).