Waiting for user input with jQuery and Javascript

Question

I am trying to wait to take the user's input (clicking a button) before continuing with the program. A simplified version of the code is this:

$(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;
}

The HTML body simply contains this:

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

On loading, the HTML alerts [object Object] . once you click the button, the page alerts 1 as it is supposed to. I think the problem is that the return line is executing without awaiting the user's click. My research suggests that I need to use a callback function (there are several discussions on waiting for user input), but I'm confused because I thought that putting the takeAnswer code in a separate function would keep the subsequent code from executing.

For further context, my goal is to ask a series of choose-your-own-adventure style questions, changing later questions based on earlier user input. I intend to use jQuery to remove the previous question and place the new question, according to logic within the JavaScript file. Edit 1: I should also mention that I am pretty new to this and am trying to teach myself (if that's not already obvious).

Edit 3: Here is the full context in JSFiddle. http://jsfiddle.net/T7VhC/ The problem is the "undefined" error arising from line 144 of the JS.

Edit 2:

Eventually I want to add other buttons and capture which button was clicked. Here is a simplified example of another (dysfunctional because, I think, there is no callback) attempt to implement what I'm doing:

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>

Thanks.

Answer 1

For complete code, you could use:

$(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

Try following

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

Waiting for user input with jQuery and Javascript

Question

2 answers

solution1
0 2014-03-10 12:20:23

solution2
0 2014-03-10 12:20:51

Waiting for user input with jQuery and Javascript

Question

2 answers

solution1 0 2014-03-10 12:20:23

solution2 0 2014-03-10 12:20:51

solution1
0 2014-03-10 12:20:23

solution2
0 2014-03-10 12:20:51