Функция проверки, вложенная в другую функцию, не запущена

Question

Я создаю простую анкету, в которой пользователь ответит на все вопросы и получит ответы, рассчитанные на основе значений баллов, присвоенных ответу.Затем функция JavaScript рассчитывает и отображает результаты на экране.

Расчет и ответы работают просто отлично, но я бы хотел, чтобы в форме появлялось оповещение, если на все вопросы не ответили (сейчас просто не запускается эта функция).У меня есть все вопросы, заданные с атрибутом «required», но в настоящее время ничего не появляется, чтобы показать, что на требуемый вопрос не ответили.Она просто не запускает функцию.

Сейчас у меня есть небольшая функция проверки, которая должна запускаться, когда пользователь нажимает на submit, и, если все проверено, она вызывает основную функцию для вычисления результатов:

function validateForm() {
    var radios = document.getElementsByTagName('input[type="radio"]');

    for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
          GetRadio();
      }
        else{
            alert("You must answer all of the questions.");
        }
    }
}

function GetRadio() {

var QS1 = document.querySelector('input[name = "radio1"]:checked').value,
    QS2 = document.querySelector('input[name = "radio2"]:checked').value,
    QS3 = document.querySelector('input[name = "radio3"]:checked').value,
    QS4 = document.querySelector('input[name = "radio4"]:checked').value,
    QS5 = document.querySelector('input[name = "radio5"]:checked').value;

selfPoints = Number(QS1) + Number(QS2) + Number(QS3) + Number(QS4) + Number(QS5);...

Я ожидаю, что затем он должен запустить проверку, прежде чем запускать оставшуюся часть функции для вычисления результатов, и поставить флажок Alert, если он оставлен пустым.Вместо этого он ничего не запускает.Не все вопросы даны ответы, поэтому он не может рассчитать, но он также не выдает предупреждение.

Обновление

OKобновленный код не хотел работать, но первое предложение об использовании querySelectorAll в моем исходном коде начало работать.(Должно быть, я сделал что-то по-другому во второй раз, но понятия не имею, что), вот что я получил сейчас:

function validateForm() {
    var radios = document.querySelectorAll('input[type="radio"]');

    for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
          GetRadio();
      }
        else{
            alert("You must answer all of the questions.");
            break;
        }
    }
}

Это работает, выдает предупреждение и отклоняетоповещение, но теперь оно выдает оповещение, даже если на все вопросы дан ответ, а затем, когда я отклоняю его, вычисляет мои результаты.Почему он не просто запускает функцию GetRadio () для вычисления, когда установлены все флажки?

Обновление 2

Хорошо,код в том виде, в каком он есть:

  function validateForm() {
    var radios = [document.getElementsByName("radio1"),
                 document.getElementsByName("radio2"),
                 document.getElementsByName("radio3"),
                 document.getElementsByName("radio4"),
                 document.getElementsByName("radio5"),
                 document.getElementsByName("radio1-2"),
                 document.getElementsByName("radio2-2"),
                 document.getElementsByName("radio3-2"),
                 document.getElementsByName("radio4-2"),
                 document.getElementsByName("radio5-2"),
                 document.getElementsByName("radio1-3"),
                 document.getElementsByName("radio2-3"),
                 document.getElementsByName("radio3-3"),
                 document.getElementsByName("radio4-3"),
                 document.getElementsByName("radio5-3"),
                 document.getElementsByName("radio1-4"),
                 document.getElementsByName("radio2-4"),
                 document.getElementsByName("radio3-4"),
                 document.getElementsByName("radio4-4"),
                 document.getElementsByName("radio5-4"),
                 document.getElementsByName("radio1-5"),
                 document.getElementsByName("radio2-5"),
                 document.getElementsByName("radio3-5"),
                 document.getElementsByName("radio4-5"),
                 document.getElementsByName("radio5-5"),];

    for (var i = 0, len = radios.length; i < len; i++) {
        if (!radios[i].checked) {
            alert("You must answer all of the questions.");
            return;
        }
    }
    GetRadio();
}

Он тянет группы, но похоже, что он все еще хочет, чтобы все переключатели были выбраны до того, как он запустит вычисление.Даже если есть ответ для каждой группы радиостанций, я получаю предупреждение.Как правильно сказать, что нужно проверить только одну радиостанцию ​​в каждой группе?

Answer 1

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

function validateQuestion(container) {
    var radios = container.querySelectorAll('input[type="radio"]');
    for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
        return true;
      }
    }
    return false;
}

function validateForm() {
  var questions = document. querySelectorAll('.question');
  var isValid = true;
  for (var i = 0, len = questions.length; i < len; i++) {
    isValid = isValid && validateQuestion(questions[i]);
    if (!isValid) {
      alert("You must answer all of the questions.");
      return;
    }
  }
  GetRadio();
}

Ваш вопрос HTML должен выглядеть следующим образомэто

<div class="question q-1">
  Question 1:
  <input type="radio" value="1-a">A
  <input type="radio" value="1-b">B
  <input type="radio" value="1-c">C
</div>
<div class="question q-2">
  Question 2:
  <input type="radio" value="2-a">A
  <input type="radio" value="2-b">B
  <input type="radio" value="2-c">C
</div>

Answer 2

Я вижу две проблемы с вашим кодом (и с обновленным кодом).

Первая проблема, которую другие люди, похоже, упустили, заключается в том, что обновленный код продолжает работать, как только он обнаруживает, что для любого вопроса выбрано какое-либо значение - он не проверяет, что все отдельные вопросы имеют ожидаемый ответ .

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

Решение состоит в том, чтобы сгруппировать ответы в вопросе и проверять один вопрос за раз. Создайте свой HTML-код следующим образом: для группировки радиостанций :

<input type="radio" name="Question1" value="a"> A
<input type="radio" name="Question1" value="b"> B
<input type="radio" name="Question1" value="c"> C

<input type="radio" name="Question2" value="a"> A
<input type="radio" name="Question2" value="b"> B
<input type="radio" name="Question2" value="c"> C

Тогда валидируйте каждый вопрос вот так:

if (!document.querySelector('input[name="Question1"]:checked').value) {
    //If nothing is checked, it will get undefined
    return false;
}

Итак, полный цикл выглядит следующим образом :

//This part is the answer to your question
for (var i=1; i <= questions.length;i++) {
    if (!document.querySelector('input[name="Question"' + i + ']:checked').value) {
        //If nothing is checked, it will get undefined and false will be returned
        return false;
    }
}

В качестве бонуса вы можете проверить результаты таким же образом:

function checkAnswer(questionNumber, correctAnswer) {
    let checkedItem = document.querySelector('input[name="Question"' + questionNumber + ']:checked');
    if (checkedItem.value === correctAnswer) {
        return true;
    }
    return false;

    //OR
    // return checkedItem.value === correctAnswer
}

Answer 3

Изменение

document.getElementsByTagName('input[type="radio"]')

до

document.querySelectorAll('input[type="radio"]')

Также попробуйте изменить функцию проверки, как показано ниже

function validateForm() {
  var radios = document.querySelectorAll('input[type="radio"]')
  if (!radios.filter(radio => !radio.checked).length) {
    GetRadio();
  } else {
    alert("You must answer all of the questions.");
  }
})