Variable is not getting re-initialized when a function is being called again

Question

I start with one item in the stack ar.

What I intended the code to do is: If user clicks the correct link (the one computer has randomly selected), we proceed to the next "level" where we add one more element to the stack.

In the next level user has to select 2 correct links in the order in which they're in the stack. Once user does that, he should proceed to the next level and so on. It's similar to Simon says game and I am just trying to imitate the bare logic of the game with this.

HTML:

<a href="javascript:void(0);" id="l1">Link 1</a>
<a href="javascript:void(0);" id="l2">Link 2</a>
<a href="javascript:void(0);" id="l3">Link 3</a>
<a href="javascript:void(0);" id="l4">Link 4</a>
<div id="log"></div>

Javascript

function check() {
  var index = 0;
  $('body').click(function(event) {
    var log = $('#log');
    alert(index);

    if ($(event.target).is(ar[index])) {
      log.html(index + ' ' + event.target.id + ' was clicked.');
      index++;

      if (index === ar.length) {
        //if all clicked elements corresponded to correct 
        //order in array and reached end of array
        level +=1;
        console.log("Passing to next level. ", level);
        randomId();
        console.log(ar);
        log.html(ar);
        check();
      }
    } 
    else {
      log.html(index + ' ' + event.target.id + ' was clicked. Is wrong');  
      index = 0;
    }
  });
}

var ar = [];  
divIds = ["#l1", "#l2", "#l3", "#l4"];
level = 1;
randomId();
check();

function randomId() {
  var min = 0;
  var max = 3;
  var id = Math.floor(Math.random() * (max-min+1)) + min;
  var selectedId = divIds[id];

  ar.push(selectedId);
  alert(ar);
}

However when I am calling check() function a second time (when we move to level 2 where there are 2 elements in stack) the value of index is not 0 despite the fact that var index = 0 is the first line of the check() function.

I am using console.log and alert to capture the value of index but their sheer number is confusing me. And by looking at the number of alert pop-ups, my check function seems to be acting like a loop. Why aren't we getting a clean slate when we're calling the function a second time?

Answer 1

Updated - removed the index parameter as it wasn't needed

If I understood your code sample correct, you could do like this

• add index and level as a parameter to the check function
• pass a start value to the index/level when call the check() (self invoked)
• replace remove the inner check() with index = 0;

This way, the check functions parameter, index and level, will work like a non global static variable, which is most likely what you need.

I also recommend an app object for your variables etc., rather than having global variables.

Side note: I couldn't get the actual code to work how it appeared it should work. After dropping the usage of the index and a few adjustments, it started to though. Is this how you intended it to work, or what's the purpose for the `index´ variable

var MyApp = {};
MyApp.ar = [];
MyApp.divIds = ["#l1", "#l2", "#l3", "#l4"];

(function check(level) {
  randomId();
  $('body').click(function(event) {
    var log = $('#log');
    if ($(event.target).is(MyApp.ar[level-1])) {
      log.html(event.target.id + ' was clicked.');
      if (level === MyApp.ar.length) {
        //if all clicked elements corresponded to correct 
        //order in array and reached end of array
        level++;
        console.log("Passing to next level. ", level);
        randomId();
        console.log(MyApp.ar);
      }
    } else {
      log.html(event.target.id + ' was clicked. Is wrong');
    }
  });
})(1);

function randomId() {
  MyApp.ar.push(MyApp.divIds[Math.floor(Math.random() * MyApp.divIds.length)]);  
  alert(MyApp.ar);
}

a {
  padding: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0);" id="l1">Link 1</a>
<a href="javascript:void(0);" id="l2">Link 2</a>
<a href="javascript:void(0);" id="l3">Link 3</a>
<a href="javascript:void(0);" id="l4">Link 4</a>
<div id="log"></div>

Answer 2

What you are running into here is called Closures. Basically, you are binding a function defined within the scope of another function to your click event. All the clicks refer to the same outer index of their scope and modify it.

Read more here

If after reading that you still are not able to understand what the issue is here, comment here and I will do my best to help, I just do not want to repeat what others have said.

Edit: As others have pointed you have another issue here, which is, you are binding the click event multiple times. You have to remove the previous bind (or even better) just change the values, do not bind multiple events.

$('body').click(function(event){})

This line of code is what makes your click work. You do not need to run check() multiple times because once you have "attached" the event handler once, you only need to check the values not rebind it over and over.

In other words, make your check() only run once, and place your index within the bound click function instead of outside if you want it to reset every time it is clicked. If you want it to reset only after certain amount of clicks you need to keep it outside of the function's closure like so:

function check(){
  index = 0;
  $('body').click(function(event){
    //NO INDEX HERE
  })
}

But in this case (which is what you have now) you need to manually reset it under some condition, from within the function which you bound to your click. For example if(ar > neededNumber){index =0;}