Question

I have a loop of 50 divs, in which I am assigning event based on the current element. However I want to assign event based on a condition.

For example, divs are arranged one behind another, just like a photo stack.
I want user to first hit first div, then only they should able to hit second div then third div and so on till they reach the end of divs.

Because of the below code user can hit on any of the div and perform action. But action needs to be performed one by one. One div after another. Please suggest the solution.

var flag=0;
var flipImage=document.querySelectorAll('.shadow');  
   for(j=0; j<flipImage.length; j++){
   var currentFlipImage=flipImage[j];
      if(j==flag){
      flag++; 
      currentFlipImage.addEventListener('click',flipDown,false);
     }
  }

Answer 1

Maybe something like:

var _handler = null;
var images = document.querySelectorAll('.shadow');
var length = images.length;

function attachHandler(index) {
    if(_handler) {
        // remove the click handler from the previous image
        images[index-1].removeEventListener('click', _handler, false);
        _handler = null;
    }
    if(index < length) {
        var handler = function(event) {
            flipDown(event);
            attachHandler(index+1); // add the click handler to next image
        }
        images[index].addEventListener('click', handler, false);
        _handler = handler;  // capture reference for removal
    }
}

attachHandler(0);

This only generates and adds event listeners when needed.

Important side note: The return value of querySelectorAll() is a NodeList which is live. That means any time you call length on this object, the list is reevaluated (the elements are searched again) which adds a performance overhead. Thus, never use list.length in the for loop. Capture the length beforehand.

Working DEMO

If you want to make it going in a loop, just remove the if statement (keep the body of course) and do

index = index % length;