jquery - JavaScript - Calling the click function more than once would not work -

i making text adventure game, require user input in form of element in html, send user input javascript using click function:

<!-- html code --> <div class="game">     <div id="gamebox">         <a name="game"></a>         <!-- javascript writes here (if works :( ) -->     </div>     <div id="inputbox">         <input type="text" id="userinput" placeholder="input" value="" />         <a href="#game" id="btn-quest" class="button" style="float: right">go!</a>     </div> </div> 

as can see above, have element , "go!" button, sends javascript code. in javascript, first define 3 variables output text.

//javascript code  var txt_input = $("#userinput"); var btn_quest = $("#btn-quest"); 

i define 2 other functions, allows me write . have other functions, storyline of text adventure game. however, root of problem can't seem progress past second event. here events:

function wakeup() {   displaygame("you wake up, @ stackoverflow. west or east? [choose 'west' or 'east']");   btn_quest.on({     "click": function() {       // begin input preproccessing       var input = txt_input.val().tolowercase();       // if/else block choice here       if (input === "west") {         //paste btn_quest here new event         gowest();       } else if (input === "east") {         //paste btn_quest here new event         goeast();       } else {         //error handler - not modify         txt_input.val("error - enter valid choice");       }     //end of if else block body     }   }); 

the first event function work perfectly, , write html, , accept first user choice. however, @ next event, no matter is, (goeast() or gowest()), program aways displays "error - enter valid choice"). right now, hypothesis "switch" function isn't working correctly. however, don't know. issue here, , how can fix it? other event functions (etc goeast) same wakeup function, except different displaygame() strings , link other event functions.

i have not included full code, in order keep code short - here full html/css/javascript if needed: http://plnkr.co/edit/55hehh4k5qeivydbrwgb?p=preview

edit: tried implement suggestion, this: seems javascript doesn't userinput anymore. when try submit user's response, nothing happens. went wrong? did same thing here of functions in game:

function wakeup() {   displaygame("you wake @ stackoverflow again, didn't work. go west or east again?");   // btn_quest.off("click").on("click",function()){   btn_quest.off("click").on;     "click", function() {       // begin input preproccessing       var input = txt_input.val().tolowercase();       // if/else block choice here       if (input === "walk") {         //paste btn_quest here new event         walktowork();       } else if (input === "bus") {         //paste btn_quest here new event         bustowork();       } else {         //error handler - not modify         txt_input.val("error - enter valid choice");       }     //end of if else block body   };   //end of function. copy until line under comment v } 

what did wrong? can please show example using function?

you need @ code see problem. reason because keep binding element multiple click events being triggered. need remove last click

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