Toggle Event Listeners
<p>I am trying to make a function that would allow me to toggle eventListener of an element.</p>

<p>In the example below, I have three buttons: <strong><em>main</em></strong>, <strong><em>on</em></strong> and <strong><em>off</em></strong>. When I click on the <strong><em>on</em></strong> button, the <strong><em>main</em></strong> button becomes functional. After I click <strong><em>off</em></strong> button, the <strong><em>main</em></strong> button should not work anymore (but now it still does).</p>

<p>Now I can achieve a desired behavior by clicking <strong><em>on</em></strong> button for the second time, but I guess it's a bad coincidence and it's not supposed to work that way.</p>

<p>Maybe I should add that I would like to work this out without using jQuery or similar and it needs to be a function, because I am going to use it for a lot of buttons.</p>

<p>(I suspect something with scope causes the problem (<em>clickHandler</em> when calling the function to <em>activate</em> the button is not the same as the <em>clickHandler</em> when calling the function to <em>disable</em> the button), but I can't think of a way to test it.)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// buttons definitions, not important
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButton = document.querySelector("#offButton");

// main function
var toggleButtons = function(toggleVal, button, element) {
    var activateButton, clickHandler, disableButton;

    // callback function for listener bellow
    clickHandler = function() {
        document.querySelector(element).classList.toggle("yellow");
    };

    activateButton = function() {
        button.addEventListener("click", clickHandler);
    };
    disableButton = function() {
        button.removeEventListener("click", clickHandler);
    };

    // when first argument is 1, make the button functional, otherwise disable its functionality
    if (toggleVal === 1) {
        activateButton();
    } else {
        disableButton();
    }
};

// when onButton is clicked, call main function with arguments
// this works
onButton.addEventListener("click", function() {
    toggleButtons(1, mainButton, "body");
});

// this fails to disable the button
offButton.addEventListener("click", function() {
    toggleButtons(0, mainButton);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.yellow {
  background-color: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" id="mainButton"&gt;mainButton
&lt;/button&gt;
&lt;button type="button" id="onButton"&gt;onButton
&lt;/button&gt;
&lt;button type="button" id="offButton"&gt;offButton
&lt;/button&gt;
&lt;p&gt;mainButton: toggles background color on click
&lt;/p&gt;
&lt;p&gt;onButton: turns on mainButtons's functionality&lt;/p&gt;
&lt;p&gt;offButton: supposed to turn off mainButton's functionality&lt;/p&gt;</code></pre>
</div>
</div>
</p>