Задать вопрос
@876786
javascript

Почему не работает проверка ответов?

Есть JS:

function summary() {
  let questions = document.getElementsByClassName('question'); // Получаем все элементы с классом 'question'
  let score = 0; // Изменяем на 0, так как у нас нет предопределённых верных ответов
  let rightAnswers = ["a_2", "a_5", "a_9", "a_10", "a_13", "a_18", "a_19", "a_24", "a_27", "a_28"]; // Предположим, что это id правильных ответов

  for (let i = 0; i < questions.length; i++) {
      let question = questions[i];
      let chosenAnswer = question.querySelector("input[type='radio']:checked"); // Находим выбранный ответ в текущем вопросе

      if (chosenAnswer && chosenAnswer.id === rightAnswers[i]) {
          score++;
      }

      console.log("Выбранный ответ: " + (chosenAnswer ? chosenAnswer.parentNode.textContent : "Нет ответа выбрано"));
      console.log("Правильный ответ: " + rightAnswers[i]);
      console.log("Очки: " + score);
  }
}

И HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
    <script type="text/javascript" src="babuin.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест на знание ПДД</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script>alert('ok')</script>
    <header>
        <h1>Тест на знание ПДД</h1>
        <nav>
            <a href="index.html">Тест</a>
            <a href="theory.html">Теория ПДД</a>
        </nav>
    </header>
    <main>
        <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №1: &laquo;Что означает знак с изображением велосипеда?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest0" id="a_1"> <label class="form-check-label" for="a_1"> Зона стоянки велосипедов</label></li>
              <li><input type="radio" name="quest0" id="a_2"> <label class="form-check-label" for="a_2">Велосипедная дорожка</label></li>
              <li><input type="radio" name="quest0" id="a_3"> <label class="form-check-label" for="a_3">Пешеходный переход</label></li
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №2: &laquo;Какой из перечисленных знаков запрещает движение мопедов?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest1" id="a_4"> <label class="form-check-label" for="a_1">1.2</label></li>
              <li><input type="radio" name="quest1" id="a_5"> <label class="form-check-label" for="a_2">3.5</label></li>
              <li><input type="radio" name="quest1" id="a_6"> <label class="form-check-label" for="a_3">3.13</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №3: &laquo;Что означает знак с изображением двух бегущих людей?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest2" id="a_7"> <label class="form-check-label" for="z_1">Детская площадка</label></li>
              <li><input type="radio" name="quest2" id="a_8"> <label class="form-check-label" for="a_2"></label>школьный двор</li>
              <li><input type="radio" name="quest2" id="a_9"> <label class="form-check-label" for="a_3"></label>осторожно дети</li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №4: &laquo;Какой знак информирует о приближении к железнодорожному переезду?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest3" id="a_10"> <label class="form-check-label" for="z_1">1.4</label></li>
              <li><input type="radio" name="quest3" id="a_11"> <label class="form-check-label" for="a_2">4.1</label></li>
              <li><input type="radio" name="quest3" id="a_12"> <label class="form-check-label" for="a_3">3.1</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №5: &laquo;Какой знак указывает на наличие остановки маршрутных транспортных средств?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest4" id="a_13"> <label class="form-check-label" for="z_1">5.16</label></li>
              <li><input type="radio" name="quest4" id="a_14"> <label class="form-check-label" for="a_2">3.1</label></li>
              <li><input type="radio" name="quest4" id="a_15"> <label class="form-check-label" for="a_3">1.15</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №6: &laquo;Какой из перечисленных знаков предупреждает о въезде в населенный пункт?;</b></p>
            <ol>
              <li><input type="radio" name="quest5" id="a_16"> <label class="form-check-label" for="z_1">3.2</label></li>
              <li><input type="radio" name="quest5" id="a_17"> <label class="form-check-label" for="a_2">4.3</label></li>
              <li><input type="radio" name="quest5" id="a_18"> <label class="form-check-label" for="a_3">5.23</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №7: &laquo;Что означает треугольный знак с изображением круга из черных стрелок?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest6" id="a_19"> <label class="form-check-label" for="z_1">Пересечение с круговым движением</label></li>
              <li><input type="radio" name="quest6" id="a_20"> <label class="form-check-label" for="a_2">запрещение разворота</label></li>
              <li><input type="radio" name="quest6" id="a_21"> <label class="form-check-label" for="a_3">запрещение движения</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №8: &laquo;Какой из знаков запрещает движение тракторов и механизмов?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest7" id="a_22"> <label class="form-check-label" for="z_1">3.15</label></li>
              <li><input type="radio" name="quest7" id="a_23"> <label class="form-check-label" for="a_2">5.2</label></li>
              <li><input type="radio" name="quest7" id="a_24"> <label class="form-check-label" for="a_3">3.6</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №9: &laquo;какой знак указыввает на пешеходную дорожку?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest8" id="a_25"> <label class="form-check-label" for="z_1">6.1</label></li>
              <li><input type="radio" name="quest8" id="a_26"> <label class="form-check-label" for="a_2">3.3</label></li>
              <li><input type="radio" name="quest8" id="a_27"> <label class="form-check-label" for="a_3">4.5</label></li>
            </ol>
          </div>
          
          <div class="question">
            <hr>
            <p class="text-center"><b>ВОПРОС №10: &laquo;Что означает знак с изображением дерева и лавочки?&raquo;</b></p>
            <ol>
              <li><input type="radio" name="quest9" id="a_28"> <label class="form-check-label" for="a_1">Зона отдыха</label></li>
              <li><input type="radio" name="quest9" id="a_29"> <label class="form-check-label" for="a_2">Зона охраны природы</label></li>
              <li><input type="radio" name="quest9" id="a_30"> <label class="form-check-label" for="a_3">Зона для купания</label></li>
            </ol>
          </div>
          <hr>
            <button class="btn-success btn-lg btn-block" id="apply" onclick="summary();">проверить ответ</button>
        </div>
    </main>
    <footer>
        <p>&copy; 2024 Тест на знание ПДД</p>
    </footer>
</body>
</html>

Не понимаю, почему не работает проверка.
  • Вопрос задан
  • 73 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
KarnaDev
@KarnaDev
Frontend developer
У вас в разметке на 26 строке не закрытый li и на 121 строке лишний div

Можно немного изменить и отделить структуру от логики:
// ждем пока контент будет полностью загружен
document.addEventListener('DOMContentLoaded', function() {
  // находим кнопку и добавляем обработчик
  const applyButton = document.getElementById('apply');
  applyButton.addEventListener('click', function() {
      summary();
  });

  function summary() {
      let questions = document.querySelectorAll('.question');
      let score = 0;
      let rightAnswers = ["a_2", "a_5", "a_9", "a_10", "a_13", "a_18", "a_19", "a_24", "a_27", "a_28"];

      questions.forEach(function(question, index) {
          let chosenAnswer = question.querySelector("input[type='radio']:checked");
          if (chosenAnswer && chosenAnswer.id === rightAnswers[index]) {
              score++;
          }

          console.log("Выбранный ответ: " + (chosenAnswer ? chosenAnswer.parentNode.textContent : "Нет ответа выбрано"));
          console.log("Правильный ответ: " + rightAnswers[index]);
          console.log("Очки: " + score);
      });
      alert("Количество правильных ответов: " + score);
  }
});

из html убираем onclick="summary();"
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка сайта на Vue и node
23 дек. 2024, в 11:07
10000 руб./за проект
Разработать 3D модель лопасти
23 дек. 2024, в 10:43
5000 руб./за проект
Разработать принципиальную схему в Altium Designer
23 дек. 2024, в 10:32
2000 руб./за проект
Ещё заказы