Question

我正在尝试等待用户输入（单击按钮），然后再继续执行该程序。代码的简化版本是这样的：

$(document).ready(function(){
    var answer = $(".question").on("click", "button", takeAnswer);
    alert(answer);
});
//Code to set the next question once the user has answered the previous question

function takeAnswer(){
    var answer = ($(".question button").data("answer"));
    alert(answer);
    return answer;
}

HTML正文只包含以下内容：

<p class="question"><button data-answer="1">Push me</button></p>

加载时，HTML提醒[object Object]。单击该按钮后，该页面将按预期1发出警告。我认为问题是return行正在执行而不等待用户的点击。我的研究表明我需要使用一个回调函数（有几个关于等待用户输入的讨论），但我很困惑，因为我认为将takeAnswer代码放在一个单独的函数中将保留后续代码执行。

对于进一步的背景，我的目标是询问一系列选择你自己的冒险风格问题，根据早期用户输入改变以后的问题。根据JavaScript文件中的逻辑，我打算使用jQuery删除上一个问题并放置新问题。 编辑1：我还应该提到我对此很陌生并且正在尝试自学（如果这还不是很明显）。

编辑3：这是JSFiddle中的完整上下文。 http://jsfiddle.net/T7VhC/问题是由JS的第144行引起的“未定义”错误。

编辑2：

最终我想添加其他按钮并捕获单击了哪个按钮。这是另一个简单的例子（功能失调因为，我认为，没有回调）尝试实现我正在做的事情：

function takeAnswer(){
  $(document).ready(function(){
    $(".question").on("click", "button", function(){
      return $(this).data("answer");
    });
  });
}

alert(takeAnswer());

HTML：

<body>
  <p class="question"><button data-answer="1">Push me</button></p>
  <p class="question"><button data-answer="2">Or push me</button></p>
</body>

感谢。

Answer 1

有关完整代码，您可以使用：

$(document).ready(function(){
  $(".question").on("click", "button", takeAnswer);
});
//Code to set the next question once the user has answered the previous question

$(takeAnswer);

function takeAnswer(){
  var answer = $(".question button").data("answer");
  alert(answer);
}

Answer 2

尝试以下

<script>
$(document).ready(function(){
  var answer = $(".question").on("click", "button", takeAnswer);
  takeAnswer();
});
//Code to set the next question once the user has answered the previous question

function takeAnswer(){
  var answer = ($(".question button").data("answer"));
  alert(answer);
  return answer;
}
</script>

使用jQuery和Javascript等待用户输入

2 个答案: