MacroG0D MacroG0D - 22 days ago 11
jQuery Question

JS - How to stop execution of a first switch when another is started?

I started to make a text game, the basic idea is:
When the game starts, user have to input his choises into the input field. The text he inputs, interacts with a switch inside the function and if user inputs the "right commands", it calls another function that may include another switch and so on.
I have a bug in this code:
The switch inside the first function is working well, and when its first case(case "yes") calls the another function, everything is starts working just fine. But when user inputs text that should interact with the switch of the second function, he actually still interacts with the first function's switch(and also with the second).
Would anybody be willing to help me to solve it or even point me in the right direction?



var startGame = function(){
showText("Welcome to the virtual pseudo-reality")
showText("Are you ready to start your journey?")
$('#btn').click(function(e) {
e.preventDefault();
switch ($('input[name=myInput]').val().toLowerCase()) {
case "yes": showText("- "+$('input[name=myInput]').val());
showText("Welcome aboard!");
selectChar();
break;
case "no": showText("- "+$('input[name=myInput]').val());
showText("Your choise is no.");
break;
default:
showText("- "+$('input[name=myInput]').val());
showText("Sorry, wrong input.") ;
break;
};
$('input[name=myInput]').val('');
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
});
};
//A first in-game function, needs to select the character that user want to be:
var selectChar = function(){
showText("<br>"+"Choose who you are, you have to choose one of two heroes: Phantomorph and Disogr.");
$('#btn').click(function(e) {
e.preventDefault();
switch ($('input[name=myInput]').val().toLowerCase()) {
case "phantomorph": showText("- "+$('input[name=myInput]').val());
showText("You choosed Phantomorph.");
user = phantomorph; friend = disogr;
break;
case "disogr": showText("- "+$('input[name=myInput]').val());
showText("You choosed Disogr.");
user = disogr; friend = phantomorph;
break;
default: alert("You need to make a right choose.");
selectChar();
break;
};
$('input[name=myInput]').val('');
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
});
};

startGame();




Answer

You are binding multiple events to the same input, so that when a user clicks the second time both event handler callbacks are executed.

Since you are using jQuery, I would switch from using .click, to .on('click', and then in the switch case where you bind the second click handler you can use .off('click' to remove the initial handler.

Better still have a variable to track the state of your game, and move the binding of second event handler out of the switch case. You'll need to do this otherwise you will be rebinding click handlers every time a user clicks.

[EDIT]

You can add any number of event handlers at once, so long as the DOM element is ready (in the jQuery document ready callback), or bind just one click event and include logic inside the event handler that checks what data you've already captured from the user to trigger any arbitrary behaviour.

I'd suggest you create one click handler and inside the callback check the value of your user variable to see if the user has set a value for it yet. (You'd just need to ensure the scope of that variable is accessible to your click handler, and any part of your application that needs it, currently in your example there is no var user;)