Uncaught RangeError: Maximum call stack size exceeded, JavaScript

javascript addeventlistener
anony_root picture anony_root · Feb 29, 2012 · Viewed 36.2k times · Source

I have a problem

    open: function($type) {
          //Some code
          document.getElementById($type).addEventListener("click", l.close($type), false);
    },
    close: function($type) {
           //There is some code too
           document.getElementById($type).removeEventListener("click", l.close($type), false);
           //^ Recursion & Uncaught RangeError: Maximum call stack size exceeded
    }

What I'm doing wrong? Without this click event listener everything is working well. And what is the third parameter doing (true|false)? Thank you.

Answer

Lycha picture Lycha · Feb 29, 2012

You are calling the close function in the addEventListener and removeEventListener when you are trying to pass is as an argument (causing an infinite loop). Instead you should simply pass the reference to the function as follows:

document.getElementById($type).addEventListener("click", l.close, false);

And:

document.getElementById($type).removeEventListener("click", l.close, false);

Related questions

How to trigger event in JavaScript?

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function. How can I do it?

Read More
addEventListener vs onclick

What's the difference between addEventListener and onclick? var h = document.getElementById("a"); h.onclick = dothing1; h.addEventListener("click", dothing2); The code above resides together in a separate .js file, and they both work perfectly.

Read More
Cannot read property 'addEventListener' of null

I have to use vanilla JavaScript for a project. I have a few functions, one of which is a button that opens a menu. It works on pages where the target id exists, but causes an error on pages where …

Read More