Recursive function not working as expected

[drayarms]

 

Hello, I'm using a recursive function (must admit I'm a novice in that area) to indicate whose turn it is (between a player and the computer) in a simple card game im developing.  Before the function is set into motion,

a variable is defined outside the function called play first, which can either be fed the value, "me" or "computer".  Now depending on which the player choses, an alert box indicates

who plays first.  If it is the player, it reads "your turn", waits for a prompt from player (a click in some designated container mimicks that for now), at which point, the value for play_first variable

is changed to computer and the function is run recursively.  Now since it is the computer's turn, a fucntion is executed (which i haven't coded yet), and soon after that, the play_first value is

again changed to "me" indicating the player's turn and the cycle continues.  The point of exit is when either player or computer has no more cards. 

It seems to work fine except for the fact that, when I prompt the player to play, I dont just get a simple "computer's turn" followed by a "your turn" alert, but also all the previous "your turn" and

"computer turn" alerts that had preceeded this particular prompt, depending on the number of times the prompt has been clicked.  So for example, if it is the second round for player to play and I click on the prompt, it would

alert "computer's turn" followed by "Your turn" twice, instead of just once as I expect it to.  Any ideas??

 

 

 

			var play_cards = "me"  //Could also be "computer"


			function whose_turn(who){


				if( (p1cards.length = 0)||(p2cards.length = 0) ){//If either player is out of cards

					alert("Game Over!");

				}else{//If neither player is done, the game should continue

					if(who == "me"){//If it is player's turn


						alert("Your turn"); 


						//Mimick the player playing a card by clicking in some div 

						$("#player2_container").click(function(){


							//Execute player 2 play function...


							//Run the whose turn function recursively, this time handing the baton to the computer

							play_first = "computer";

							whose_turn(play_first); //It's now computer's turn



						});





					}else{//If it's computer's turn

						alert("Computer's turn"); 


						//Prevent player2 from playing if he attempts...



						//Execute the computer play function...




						//Run the whose turn function recursively, this time handing the baton to the player

						play_first = "me";

						whose_turn(play_first); //It's now your turn


					}//End else if it's computer's turn


				}//End of else if neither player is done

[requinix]

The problem is you keep adding onclick handlers. Yes, adding. You aren't replacing the one set previously. Add the handler only once and do so outside of whose_turn(). Don't have to do anything else with it.

[goodacre.liam]

Also, in your first if statement you are using '=' which is the assignment operator.  You should be using '===' for the equality comparison operator.

To extend on what 'requinix' said:  the 'click' method on a jQuery object attaches an event handler to when the related dom elements are clicked.  It doesn't invoke a click.  To invoke, I believe there is a method called 'trigger': $('...').trigger('click').

 

I think you need to rethink your program design - does this really require any recursion?

 

Regards,

Liam Goodacre

[drayarms]

@requinix, your suggestion (taking the click function outside of whose_turn function works).  But I'm not quite sure why the onclick keeps getting added with each recursion, or maybe I didn't quite understand your explanation.  Please can you clarify a little more

 

@liam, I'm not sure what you are talking about because I believe my first if statment uses the equality == operator and not the assignment = operator.  Admitedly it is not the strict === equality but the == seems fine in this situation.

[goodacre.liam]

I was referring to this part of the code you posted:

if( (p1cards.length = 0)||(p2cards.length = 0) ){

[requinix]

@requinix, your suggestion (taking the click function outside of whose_turn function works).  But I'm not quite sure why the onclick keeps getting added with each recursion, or maybe I didn't quite understand your explanation.  Please can you clarify a little more

jQuery's click() adds event handlers. Every time you call that you add a new event handler. When onclick happens every one of those will be executed.

[drayarms]

@liam, thanks for pointing that out. @requinix, thanks for the explanation.

[goodacre.liam]

Unless you have further issues to discuss, please mark this problem as 'Solved'.