Как сделать это в течение цикла

Question

Я думаю, что это можно сделать за l oop, но я не уверен, как это сделать express? Он может использовать меня, но как express # form + i, будь то #form [i] или #form {i}, я пытался, но это не работает.

Кроме того, я хочу, чтобы, если пользователь не выбрал какой-либо ответ, pu sh "undefined" в массив, чтобы избежать его пустым.

$('#form1').click(function() {
  radioValue = $("input[name='answer1']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form2').click(function() {
  radioValue = $("input[name='answer2']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form3').click(function() {
  radioValue = $("input[name='answer3']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form4').click(function() {
  radioValue = $("input[name='answer4']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form5').click(function() {
  radioValue = $("input[name='answer5']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form6').click(function() {
  radioValue = $("input[name='answer6']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});


$('#form7').click(function() {
  radioValue = $("input[name='answer7']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});
$('#form8').click(function() {
  radioValue = $("input[name='answer8']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form9').click(function() {
  radioValue = $("input[name='answer9']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

$('#form10').click(function() {
  radioValue = $("input[name='answer10']:checked");
  if (radioValue) {
    arr.push(radioValue.val())
    console.log(arr);
  }
});

Вот часть html .

  <div class="stepShow">
    <!--步驟區塊 -->
    <div class="stepArea stepAreaActive">
      <span><video style="width:300px" id="my_video" src="https://firebasestorage.googleapis.com/v0/b/capstone-daa95.appspot.com/o/real%2Ffake%2F001_870.mp4?alt=media&token=96b7884c-9367-48b9-b422-0e6c238570db"></video></span>
      <form id="form1">
      <p>Choose whether this video is fake or real?
        <input name="answer1" type="radio" name="choice" value="real"> Real
        <input name="answer1" type="radio" name="choice" value="fake"> Fake
      </p>
    </form>

<!--       <a class="pre" onclick="preFun(0)" href="javascript:;">Contact</a>
 -->      <a class="next" onclick="nextFun(0)"  href="javascript:;">Next</a>
    </div>

    <div class="stepArea">
 <span><video style="width:300px" id="my_video" src="https://firebasestorage.googleapis.com/v0/b/capstone-daa95.appspot.com/o/real%2Ffake%2F001_870.mp4?alt=media&token=96b7884c-9367-48b9-b422-0e6c238570db"></video></span>
 <form id="form2">
      <p>Choose whether this video is fake or real?
        <input name="answer2" type="radio" name="choice" value="real" > Real
        <input name="answer2" type="radio" name="choice" value="fake" > Fake
      </p>
    </form>

Answer 1

Я рекомендую привязать одну и ту же функцию-обработчик ко всем входам.
Это помогает избежать повторения (см. DRY) и потенциально способствует более удобному, гибкому и легкому коду.

Вот пример:

1. Привязать обработчик событий change ко всем входам.
2. Когда вход изменяется, повторите все шаги и найдите их проверенные входы.
3. Для каждого шага добавьте его проверенное значение (или неопределенное) в массив.

const $steps = $('.stepArea');
const $inputs = $('.inptAnswer');
const $output = $('#output');
let stepValues = [];

function getStepValues() {
  stepValues = $.map($steps, function(step) {
    return $('.inptAnswer:checked', step).val() || [undefined];
  });
  $output.text(stepValues);
}

$inputs.on('change', getStepValues);

#output {
  margin: 1em 0;
  padding: 1em;
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="stepShow">

  <div class="stepArea stepAreaActive">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>

</div>

<div id="output"></div>

---

Без jQuery, только для ударов:

const steps = document.querySelectorAll('.stepArea');
const inputs = document.querySelectorAll('.inptAnswer');
const output = document.getElementById('output');
let stepValues = [];

function getStepValues() {
  stepValues = Array.from(steps).map((step) => {
    let input = step.querySelector('.inptAnswer:checked');
    return input ? input.value : undefined;
  });
  output.innerHTML = stepValues;
}

inputs.forEach((input) => {
  input.addEventListener('change', getStepValues);
});

#output {
  margin: 1em 0;
  padding: 1em;
  background: lightblue;
}

<div class="stepShow">

  <div class="stepArea stepAreaActive">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>
  <div class="stepArea">
    <form class="form">
      Choose whether this video is fake or real?
      <input class="inptAnswer" type="radio" name="choice" value="real"> Real
      <input class="inptAnswer" type="radio" name="choice" value="fake"> Fake
    </form>
  </div>

</div>

<div id="output"></div>