Используйте Jquery, чтобы получить значение

Question

Я делаю приложение для викторины. Консоль не работает в моем коде, поэтому я знаю, что jQuery в некотором смысле неверен. Я хочу получить значение, чтобы сравнить его с ответом.

$('.quizAnswers').on('submit', '.choice', function(event) {
  event.preventDefault();

  let playerAnswer = $(this).value();
  console.log(playerAnswer + " clicked");

  $(this).closest('.quizQuestion').remove();
  recieveAnswer(playerAnswer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quizQuestion quizSlide">
  <form class="quizAnswers">
    <input type="button" value="A" class="choice"></input>
    <input type="button" value="B" class="choice"></input>
    <input type="button" value="C" class="choice"></input>
    <input type="button" value="D" class="choice"></input>
  </form>

Answer 1

JS запускается, когда вы получаете событие отправки для кнопки, но:

• Только формы имеют события отправки
• Ничто никогда не отправит форму, потому что у вас есть вы иметь type="button", которая является кнопкой, которая по умолчанию ничего не делает.

Итак:

• Используйте кнопки отправки (предполагается, что вы строите код на стороне сервера для прогрессивного улучшения ) .
• Прослушивание обработчика щелчков

Ваша следующая проблема $(this).value();: метод называется val, а не value

$('.quizAnswers').on('click', '.choice', function(event) {
  event.preventDefault();
  let playerAnswer = $(this).val();
  console.log(playerAnswer + " clicked");
  $(this).closest('.quizQuestion').remove();
  //  recieveAnswer(playerAnswer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class='quizAnswers'>
  <input type='submit' value='A' class='choice'>
  <input type='submit' value='B' class='choice'>
  <input type='submit' value='C' class='choice'>
  <input type='submit' value='D' class='choice'>
</form>

Answer 2

Я думаю, что вы хотите использовать здесь радио-кнопки

Вы можете дать одинаковое имя для всех входов радио-кнопки и получить значение выбранного радио в форме отправки, как это

$('#quizAnswers').on('submit', function(event){

      event.preventDefault();
      
       var answer = $('input[name=choice]:checked', '#quizAnswers').val();
      
      console.log(answer+' is selected');
      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='quizQuestion quizSlide'>
<form id='quizAnswers'> 
  <input type='radio' value='A' name='choice'/> A
  <input type='radio' value='B' name='choice'/> B
  <input type='radio' value='C' name='choice'/> C
  <input type='radio' value='D' name='choice'/> D
  <button type="submit">Submit</button>
</form>
</div>