Question

我正在制作一个文本冒险游戏，它需要用html元素形式的用户输入，这将使用点击功能将用户输入发送到JavaScript：

<!-- 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>

如上所示，我有一个元素和一个“Go！”按钮，将其发送到我的JavaScript代码。在JavaScript中，首先我定义3个变量来输出我的文本。

//JavaScript Code

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

我会定义另外两个函数，这些函数允许我写入。我会提供其他功能，这些功能适用于文本冒险游戏的故事情节。然而，问题的根源在于我似乎无法超越第二个事件。以下是我的活动：

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
    }
  });

第一个事件函数可以正常工作，并写入我的html，并接受第一个用户选择。但是，在下一个事件中，无论它是什么，（goEast（）或goWest（）），我的程序都会显示“错误 - 输入有效选项”）。现在，我的假设是“切换”功能无法正常工作。但是，我老实说不知道。这是什么问题，我该如何解决？其他事件函数（go goEast）与wakeUp函数完全相同，只是使用不同的displayGame（）字符串并链接到其他事件函数。

我没有提供完整的代码，以保持我的代码简短 - 但如果需要，这里是完整的html / css / javascript：http://plnkr.co/edit/55heHh4k5QEIVYdBrWGB?p=preview

编辑：我试图实现这样的建议：但似乎JavaScript甚至不再获得用户输入。当我尝试提交用户的回复时，没有任何反应。什么地方出了错？我在游戏中的所有功能都做了同样的事情：

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
}

我做错了什么？你能用这个函数来展示一个例子吗？

Answer 1

您需要查看所有代码才能看到问题。原因是因为您继续绑定元素，因此会触发多个单击事件。您需要删除最后一次点击

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

JavaScript - 不止一次调用click函数是行不通的

1 个答案: