title: Why are old variables reused when using event handler functions with Javascript?
body: <p>I'm trying to create a Simon game (project from a Udemy course) where you have to memorize a pattern sequence and click the right buttons. At each level, the pattern sequence increases by one. You have to repeat the entire sequence each time. If you lose, you have to press a key to restart the game. Here is an example:</p>
  <p><a href="https://londonappbrewery.github.io/Simon-Game/" rel="nofollow noreferrer">https://londonappbrewery.github.io/Simon-Game/</a></p>
  <p>However, when my game is restarted with my current code, everything falls apart. I don't know if old variables from a previous game continue into the new one, or maybe my code is just written really poorly.</p>
  <p>I've implemented the entire game within a keypress event handler. Doing this initiates all the functions and variables of the game. The sequence is stored within an array, and each subsequent click on a box compares its colour value against the array. If it doesn't match - its game over. If it does match, it will either wait for you to finish the sequence correctly, or go to the next level.</p>
  <p>Can anyone give me pointers on what I might be doing wrong? And whether it's at all possible to make this work the way I have it set up?</p>
  <pre><code>$(document).on(&quot;keypress&quot;, function(){
      let counter = 0;
      let level = 1;
      let colours = [&quot;green&quot;,&quot;red&quot;,&quot;yellow&quot;,&quot;blue&quot;];
      let nodeList = [];
      
      function nextNode(){
          randomNumberGen = Math.floor(Math.random()*4);
          currentNode = colours[randomNumberGen];
          nodeList.push(currentNode);
          $(&quot;.&quot;+currentNode).fadeOut(200).fadeIn(200);
      }
      
      $(&quot;h1&quot;).text(&quot;Level &quot;+level);
      setTimeout(function() {
          nextNode();
      },500);   
      
      $(document).on(&quot;click&quot;, &quot;.box&quot;, function(){
          selectedNode = $(this).attr(&quot;id&quot;);
          $(&quot;#&quot;+selectedNode).addClass(&quot;pressed&quot;);
          setTimeout(function(){
              $(&quot;#&quot;+selectedNode).removeClass(&quot;pressed&quot;);
          },100);
  
  
          if (nodeList[counter] != selectedNode){
              gameSounds(&quot;wrong&quot;);
              $(&quot;body&quot;).addClass(&quot;game-over&quot;);
              setTimeout(function(){
                  $(&quot;body&quot;).removeClass(&quot;game-over&quot;);
              },100);
              $(&quot;h1&quot;).text(&quot;Game Over, Press Any Key to Restart&quot;);
          }
          else{
              gameSounds(selectedNode);
              counter++;
              if (counter&gt;= nodeList.length){
                  level++;
                  setTimeout(function(){
                      $(&quot;h1&quot;).text(&quot;Level &quot;+(level));
                  }, 1000);
                  counter = 0;
                  setTimeout(function() {
                      nextNode();
                  },1000);
              }
          }
          
      });
  });
  
  function gameSounds(key){
      var soundPlay = new Audio(&quot;sounds/&quot;+key+&quot;.mp3&quot;);
      soundPlay.play();
  }
  </code></pre>