Ожидание пользовательского ввода с jQuery и Javascript

0

Я пытаюсь дождаться ввода пользователя (нажав кнопку), прежде чем продолжить работу с программой. Упрощенная версия кода такова:

$(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 в отдельную функцию приведет к выполнению последующего кода.

Для дальнейшего контекста, моя цель - задать ряд вопросов о выборе вашего собственного приключения, изменив более поздние вопросы на основе более раннего ввода пользователем. Я намерен использовать jQuery для удаления предыдущего вопроса и размещения нового вопроса в соответствии с логикой в файле JavaScript. Изменить 1: Я должен также упомянуть, что я довольно новичок в этом и пытаюсь научить себя (если это еще не очевидно).

Редактировать 3: Вот полный контекст в JSFiddle. http://jsfiddle.net/T7VhC/ Проблема заключается в "неопределенной" ошибке, возникающей из строки 144 JS.

Изменить 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>

Благодарю.

  • 0
    какой выход вы хотите
  • 1
    Не уверен, что вы ожидаете здесь: var answer = $(".question").on("click", "button", takeAnswer); потому что тогда answer равным $(".question")
Показать ещё 3 комментария
Теги:

2 ответа

0

Для полного кода вы можете использовать:

$(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);
}
Поделиться
  • 0
    Проблема в том, что он предупреждает «1» каждый раз. Если у меня есть вторая кнопка с данными «2», это не захватывает эти данные, верно?
  • 0
    @ Ethan826, опять же, вы не объясняете, чего ожидаете, поэтому я все еще в замешательстве. Теперь, если вам нужна более точная помощь, предоставьте jsfiddle, который воспроизводит вашу проблему, может быть проще ее понять
Показать ещё 1 комментарий
0

Попробуйте следующее

<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>
Поделиться
  • 0
    Спасибо за ответ. Я думаю, что это все еще проблематично, потому что это всегда предупреждает 1 . Я отредактировал свой вопрос, чтобы отразить тот факт, что я хочу вернуть значение data одной из нескольких кнопок.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню