CODEWITHSUNDEEP
javascriptjqueryarrays
Alexandro Navarro
Alexandro Navarro

Reputation: 69

Problems with function, firing click() multiple times

I have a problem with a project I'm doing; https://codepen.io/argestis/pen/gLraBq?editors=0001

I have a function, that is a simon says game. So far I want to push the values of the colors into an array and then compare that array into that function. Everything is working until i empty the value for the array i'm using to push the values that the user should enter from GIU, when i go back to the function GameOn() and i try to start pushing the values the click triggers multiple times.

Here's the reference function, but on console of the codepen I shared above you guys can see the error i'm getting. 

function gameOn() {
    game.blue.on("click", function() {

        game.guessWhat.push(1);
        console.log("I were at blue")
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }

    });

    game.red.on("click", function() {
        console.log("I were at red")
        game.guessWhat.push(2);
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }
    });

    game.green.on("click", function() {
        console.log("I were at green")
        game.guessWhat.push(3);
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }
    });

    game.yellow.on("click", function() {
        console.log("I were at yellow")
        game.guessWhat.push(4);
        if (game.guessWhat.length !== game.count.length) {

        } else {
            verifySequence();
        }


    });
}

Thank you for your time, guys!

Upvotes: 3

Views: 84

Answers (3)

RizkiDPrast
RizkiDPrast

Reputation: 1725

You register multiple 'click' event on the same item when calling verifySequence(). You can unregister click event prior to register it to solve that

//problem in verifySequence()
function verifySequence() {
...
  if (verify) {
    console.log("this is game.guessWhat: " + game.guessWhat);
    //when you call nextRound() you register click event on the same item (multiple times)
    nextRound();
  } else {
    clearUser();
  }
}
}


//making sure to unregister 'click' event before add one
game.blue.off("click").on("click", function() {
  ...
});

game.red.off("click").on("click", function() {
  ...
});

game.green.off("click").on("click", function() {
  ...
});

game.yellow.off("click").on("click", function() {
  ...
});

Upvotes: 1

ScanQR
ScanQR

Reputation: 3820

Always bind one time click outside any function call and preferebly on ready(). In current gameOn() method you bind click hence multiple time you might see it is triggered. Remove it from gameOn().

Bind clicks as follows,

 $(document).ready(function(){
game.blue.on("click", function() {

    game.guessWhat.push(1);
    console.log("I were at blue")
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }

});

game.red.on("click", function() {
    console.log("I were at red")
    game.guessWhat.push(2);
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }


});

game.green.on("click", function() {
    console.log("I were at green")
    game.guessWhat.push(3);
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }


});

game.yellow.on("click", function() {
    console.log("I were at yellow")
    game.guessWhat.push(4);
    if (game.guessWhat.length !== game.count.length) {

    } else {
        verifySequence();
    }
  });
});

Upvotes: 1

Alexandro Navarro
Alexandro Navarro

Reputation: 69

Sergio. I call the function gameOn() every time I empty the values on the array I'm pushing the sequence for a new round. But when i click once any button the button triggers until is the same length of the other array I'm using to compare the sequence of simon says. 

function nextRound(){

 game.guessWhat = [];
 game.count.push(Math.floor((Math.random() * 4) + 1))
 console.log("this is game.count: " + game.count)
 console.log("this is game.guessWhat inside nextRound function: " + game.guessWhat)
 gameOn();

}


function verifySequence(){

verify = true;

console.log("this is game.guessWhat entering verifySequence function: " + game.guessWhat)
  for(var i = 0; i < game.count.length; i++){
     if(game.count[i] !== game.guessWhat[i]){
        verify = false;
  }

   }

if(verify == true){console.log("this is game.guessWhat: " + game.guessWhat); nextRound(); }
else{clearUser();}
 }

And this is the game object;

var game = {
count : [],
guessWhat : [],
red : $("#red"),
blue : $("#blue"),
green : $("#green"),
yellow : $("#yellow")
};

Upvotes: 1

Related Questions