title: Remove Event Listener method for a toggle
body: <p>I have a simple click function, that when a button is clicked the user can't scroll.  This all works OK. The button works as toggle though, and on the 'else' part of the toggle, i.e. when the user clicks again, I want to remove the event listener that stop the user scrolling with the <code>removeEventListener();</code> method.  The function I am calling within this method isn't working though?</p>
  
  <p>I can't seem to work out what the problem is?</p>
  
  <p>codepen: <a href="https://codepen.io/emilychews/pen/MrBvzP" rel="nofollow noreferrer">https://codepen.io/emilychews/pen/MrBvzP</a></p>
  
  <p>JS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var button = document.getElementById("button");
  
  // function to be called and removed when button is clicked
  function noscroll() {
      window.scrollTo(0, 0);
  }
  
  // TOGGLE EVENT LISTENER
  var scrollToggle = false;
  
  function toggleEventListener() {
      if (scrollToggle === false) {
  
          window.addEventListener("scroll", function(){
          noscroll();        
          }, false);
  
        scrollToggle = true;
  
      } else {
  
          window.removeEventListener("scroll", function(){
          noscroll();        
          }, false);
  
        scrollToggle = false;
  
      }
  }
  
  button.addEventListener("click", function() {
      toggleEventListener();
  }, false)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin: 0; padding: 0; height: 150vh;}
  
  #button {font-family: arial;
    margin: 10px 0 0 30px;
    width: 100px;
    height: 50px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="button"&gt;Click Me&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>