Javascript Click Event Pushing Multiple Duplicates to Array

Question

In recreating the Simon game, I am trying to push a click event to an array and then immediately test that Array in a nested function. On the first pass it seems to work.

However, on the third run the array does not seem to clear.

The screen shot below also shows that each input is printed multiple times to the console.

Full code pen here - https://codepen.io/jhc1982/pen/NwQZRw?editors=1010

Quick example:

function userMoves() {
  var userInput = [];

document.getElementById("red").addEventListener("click", function(){
  userInput.push("red");
  testington();
}); 

$(".red").mousedown(function(event){
  redAudio.play();
  $(".red").css("background-color", "red");
});

$(".red").mouseup(function(){
  $(".red").css("background-color", "#990000");
});

function testington(){
 if (userInput.length == pattern.length) {
   for (var i = 0; i < userInput.length; i++) {
     if (userInput[i] !== pattern[i]) {
         alert("Game Over");
     } else if (i === userInput.length -1 && userInput[i] === pattern[i]) {
        userInput = emptyArr;
        simonMoves();
        console.log("user input is ",userInput);
     } else {
       continue;
    }
   }    
  } 
 }
}

I am sure it is something really obvious but have been stuck for hours.

This is because of your for loop for (var i = 0; i < userInput.length; i++) {. It logs multiple times because it loops multiple times — pfg
– pfg, Commented Dec 11, 2017 at 18:35

Koas · Accepted Answer · 2017-12-11 18:50:52Z

1

I think the problem may be that you are assigning the click events every time the userMoves execute. That means every time the function is called the event is added to the elements, so after two calls to userMoves() when you click on red the event is executed twice, after three calls it is executed three times, etc.

The code that adds the event listener should be out of the userMoves function. The testington function should also be out of userMoves, which would get much simpler:

function userMoves() {
    $("#score-text").text(level);
    userInput = [];
}

Here's a Pen with working code: https://codepen.io/anon/pen/ppzqyY

edited Dec 11, 2017 at 18:50

answered Dec 11, 2017 at 18:42

Koas

4203 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user8467470 Over a year ago

Thanks man. I really, really, really need to get my head around closures.

theAlexandrian · Accepted Answer · 2017-12-11 18:54:39Z

0

You need to add the break; keyword to after alert("Game over");

function testington(){
 if (userInput.length == pattern.length) {
  for (var i = 0; i < userInput.length; i++) {
   if (userInput[i] !== pattern[i]) {
    alert("Game Over");

    break; // Break the loop

   } else if (i === userInput.length -1 && userInput[i] === pattern[i]) {
    userInput = emptyArr;
    simonMoves();
    console.log("user input is ",userInput);
   } else {
     continue;
   }
  }    
 } 
}

answered Dec 11, 2017 at 18:54

theAlexandrian

9086 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript Click Event Pushing Multiple Duplicates to Array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related