title: Access outside variable from anonymous function
body: <p>I asked this earlier, got linked to <a href="https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example"><strong>This Thread</strong></a> which didn't really help me what so ever. </p>
  
  <p>I have got a list of instances of a class, these classes store reference to an DOM element, and a method, and an INT. </p>
  
  <p>I need to go through each of these class instances and assign the method to the click event of the elements. </p>
  
  <pre><code>for(var i = 0, l=children.length; i&lt;l; i++) {
        var child = children[i];
        if(child.nodeType === 1 &amp;&amp; child.tagName === "LI") {
          listItems[x] = new subMenu(child);
          child.addEventListener('click', function(x) {
            listItems[x].toggle(); &lt;!------- x is always 7, it should be 0-6
          }, false);
          x++;
        }
      }
  </code></pre>
  
  <p>Below is the class:</p>
  
  <pre><code>class subMenu {
        constructor(obj) {
          this.elm = obj;
          this.state = 0;
        }
  
        toggle() {
          if (this.state === 0) {
            addClass(this.elm, 'toggled');
            this.state = 1;
          } else {
            removeClass(this.elm, 'toggled');
            this.state = 0;  
          }
        }
      }
  </code></pre>
  
  <p>Here is an image of the <code>listItems</code>:
  <a href="https://i.stack.imgur.com/i3krE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i3krE.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit:</strong>
  If I make the changes I believe to be correct from the linked post, I get this:</p>
  
  <pre><code>var menuParent = document.getElementById('megamenu');
      var children = menuParent.childNodes;
      var x = 0;
      for(var i = 0, l=children.length; i&lt;l; i++) {
        var child = children[i];
        if(child.nodeType === 1 &amp;&amp; child.tagName === "LI") {
          listItems[x] = new subMenu(child);
          child.addEventListener('click', bindToggle(x), false);
          x++;
        }
      }
      function bindToggle(i) {
        return listItems[i].toggle();
      }
    }, false);
  </code></pre>
  
  <p>However the <code>toggle()</code> method is simply running once on assignment and then not running again when I click the element. </p>
  
  <p><strong>Edit 2</strong>
  Sorry i did actually do it correct the first time, just got the code wrong above. So i have amended my code to return a function to the EventHandler.</p>
  
  <pre><code>var menuParent = document.getElementById('megamenu');
      var children = menuParent.childNodes;
      var x = 0;
      for(var i = 0, l=children.length; i&lt;l; i++) {
        var child = children[i];
        if(child.nodeType === 1 &amp;&amp; child.tagName === "LI") {
          listItems[x] = new subMenu(child);
          child.addEventListener('click', bindToggle(x), false);
          x++;
        }
      }
      function bindToggle(x) {
        return function() { console.log("Value: " + x); }; // listItems[x].toggle();
      }
  </code></pre>
  
  <p>However the <code>console.log</code> is simply outputting </p>
  
  <blockquote>
    <p>Value: 2</p>
  </blockquote>
  
  <p>If I add a <code>console.log(x)</code> the line above the EventHandler` then it displays 0-6 like it should, so the value im passing over to the function shouldn't be the issue. </p>