title: Toggle Event Listeners
body: <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>