Items in array pushed more than needed

Question

I have some jQuery:

    $("#pink").click(function() {
        user_seq.push(1);
    });
    $("#blue").click(function() {
        user_seq.push(2);
    });
    $("#yellow").click(function() {
        user_seq.push(3);
    });
    $("#green").click(function() {
        user_seq.push(4);
    });

I want it to, for example, if the user clicks on #blue, #yellow and #green, to push to the array [2, 3, 4].

Then if the array length matches another array's length, the array empties and the same process begins again.

However, when I console.log the array, with every new round after the first one the values in it are pushed more times than needed. This is how the console log looks, the user sequence is supposed to match the computer sequence:

The ultimate goal is to compare both arrays and if they match, add another step to the game. Here is the fiddle. Click on the small green circle to start the game/keep adding rounds.

Entire JS here, the last part (function check()) I haven't used yet:

/***************
* Presets
***************/
var round = 0; 
var user_count = 0; //how many times the player has pressed a button
var strict = false; //strict mode on/off
var user_seq = []; //the order the player has pressed the buttons
var right_seq = []; //the right sequence of presses

/*************
* Start Game
*************/
$("#start").click(function() {
    //strict mode on
    $("#strict").click(function() {
        $(this).addClass("disabled");
        strict = true;
    });   

    gen_sequence();
})

/****************************
* Generate a random sequence
****************************/
function gen_sequence() {
    round++;
    $("#round-text").text(round); //display round number

    var n = Math.floor(Math.random() * 4) + 1; //generate a random number from 1-4
    right_seq.push(n); //push the number to the sequence array
    show_sequence();
};

/***********************
* Display the sequence
***********************/
function show_sequence() {
  var k = right_seq.length;

  //assign each button a number
  //when the loop goes over it that button's animation plays
  (function animation(i) {
    if (i >= right_seq.length) {
      return;
    }
    setTimeout(function() {
      if (right_seq[i] == 1) {
        setTimeout(function() {
          TweenMax.from("#pink", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          one.play();
        }, 1000);
      } else if (right_seq[i] == 2) {
        setTimeout(function() {
          TweenMax.from("#blue", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          two.play();
        }, 1000);
      } else if (right_seq[i] == 3) {
        setTimeout(function() {
          TweenMax.from("#yellow", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          three.play();
        }, 1000);
      } else {
        setTimeout(function() {
          TweenMax.from("#green", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          four.play();
        }, 1000);
      }; //end for loop
      animation(++i);
    }, 500);
  })(0);

    user_input();
}


/********************
* User sequence
********************/
//what the user inputs after seeing the sequence play out
//on each click the count goes up
//the number of the button is pushed to the user's array to be compared with the correct sequence
function user_input() {
    $("#pink").click(function() {
        user_seq.push(1);
    });
    $("#blue").click(function() {
        user_seq.push(2);
    });
    $("#yellow").click(function() {
        user_seq.push(3);
    });
    $("#green").click(function() {
        user_seq.push(4);
    });

    console.log("computer: " + right_seq);
    console.log("user: " + user_seq);

};

/**************************************************
* Check if user's sequence matches the correct one
**************************************************/
function check() {

    if (right_seq.length === user_seq.length && user_seq === right_seq) {
        if (round <= 20) {
            //display message
            user_seq = [];
            right_seq = [];
            gen_sequence();
            $(".circle").removeClass("disabled");
        } else {
            //display message
            //instructions to restart game
        }
    } else if (strict = true) {
        round = 0;
        user_seq = [];
        real_seq = [];
        //display message
    } else {
        show_sequence();
    }

}

Answer 1

It looks like your show_sequence function is running user_input which is adding a new click handler to each button every time it is called. Since show_sequence is run every time you display the pattern, every new round means an additional click handler and an additional push when the button is pressed.

To see this in action (in Chrome) inspect one of the buttons and in the Elements tab click on "Event Listeners" on the right panel. If you open the "click dropdown" you should be able to see all click listeners currently assigned. As you start new rounds, more and more listeners will be added, which is the cause of your problem.

I would suggest only calling user_input when the page is loaded to avoid this.

Answer 2

You have a function check inside of which you run gen_sequence inside of which you run show_sequence inside of which you run user_input inside of which you assign the click events for your elements

Every time 'check' runs, you're setting a NEW click event on your 4 buttons. It's running the old click events, and the new ones.