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

Question

I am making a text adventure game, which would require user input in the form of a element in html, which would send the user input to JavaScript using the click function:

<!-- HTML CODE -->
<div class="game">
    <div id="gamebox">
        <a name="game"></a>
        <!-- Javascript writes to here (if it 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 you can see above, I have a element and a "Go!" button, which sends it to my JavaScript code. In JavaScript, first I define 3 variables where I would output my text.

//JavaScript Code

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

I would than define 2 other functions, which allows me to write into the . I would than have other functions, which are for the storyline of the text adventure game. However, the root of the problem is that I can't seem to progress past the second event. Here are my events:

function wakeUp() {
  displayGame("You wake up, at 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 for choice here
      if (input === "west") {
        //Paste btn_quest here for new event
        goWest();
      } else if (input === "east") {
        //Paste btn_quest here for new event
        goEast();
      } else {
        //Error handler - do not modify
        txt_input.val("Error - enter a valid choice");
      }
    //End of if else block body
    }
  });

The first event function would work perfectly, and write to my html, and accept the first user choice. However, at the next event, no matter what it is, (goEast() or goWest()), my program aways displays "Error - enter a valid choice"). Right now, my hypothesis is that the "switch" function isn't working correctly. However, I honestly don't know. What is the issue here, and how can I fix it? The other event functions (etc goEast) are exactly the same as the wakeUp function, except with different displayGame() strings and link to other event functions.

I have not included the full code, in order to keep my code short - but here is the full html/css/javascript if needed: http://plnkr.co/edit/55heHh4k5QEIVYdBrWGB?p=preview

Edit: I tried to implement the suggestion, like this: But It seems that JavaScript doesn't even get the userinput anymore. When I try to submit the user's response, nothing happens. What went wrong? I did the same thing here with all of my functions in the game:

function wakeUp() {
  displayGame("You wake up at stackoverflow again, but it 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 for choice here
      if (input === "walk") {
        //Paste btn_quest here for new event
        walkToWork();
      } else if (input === "bus") {
        //Paste btn_quest here for new event
        busToWork();
      } else {
        //Error handler - do not modify
        txt_input.val("Error - enter a valid choice");
      }
    //End of if else block body
  };
  //End of function. Copy until line under this comment V
}

What did I do wrong? Can you please show a example using this function?

Answer 1

You need to look at all the code to see the problem. The reason is because you keep binding to the element so multiple click events are being triggered. You need to remove the last click

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