Почему у меня не работает код?

Рейтинг: 0Ответов: 1Опубликовано: 29.05.2023

В моём опроснике правильный ответ должен красится в зелёный, а неправильный в красный, однако это не происходит: html:

function markAnswer() {
  var answers = ["c"];
  var radioElements = document.getElementsByName('q1');
  var selectedElement;

  for (var i = 0; i < Elements.length; i++) {
    var element = radioElements[i];
    if (element.checked) {
      selectedElement = element;
      break;
    }
  }

  if (!selectedElement) {
    return;
  }

  for (var i = 0; i < Elements.length; i++) {
    var element = radioElements[i];
    if (element.value === answers[0]) {
      element.parentElement.classList.add("correct");
    } else {
      element.parentElement.classList.add("incorrect");
    }
  }
}
.correct {
  background-color: #7fff7f;
}

.incorrect {
  background-color: #ff7f7f;
}
<h1 class="h13">Ты кого выберешь?</h1>
<form>
  <input type="radio" id="q1a" name="q1" value="a">
  <label for="q1a">Python</label><br>
  <input type="radio" id="q1b" name="q1" value="b">
  <label for="q1b">Java</label><br>
  <input type="radio" id="q1c" name="q1" value="c">
  <label for="q1c">JavaScript</label><br>
  <input type="button" value="Ответить">
</form>
</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

ответ должен красится в зелёный, а неправильный в красный

Предложу такой вариант... Без циклов.

function markAnswer() {
  var answers = ["c"];
  const o = document.querySelector('[name="q1"]:checked')
  if (!o) return
  // если был неправильный ответ
  document.querySelector('[name="q1"] + .incorrect')?.classList.remove('incorrect')
  const c = o.value === answers[0] ? 'correct' : 'incorrect'
  o.nextElementSibling.classList.add(c)
}
.correct {
  background-color: #7fff7f;
}

.incorrect {
  background-color: #ff7f7f;
}
<h1 class="h13">Ты кого выберешь?</h1>
<form>
  <input type="radio" id="q1a" name="q1" value="a">
  <label for="q1a">Python</label><br>
  <input type="radio" id="q1b" name="q1" value="b">
  <label for="q1b">Java</label><br>
  <input type="radio" id="q1c" name="q1" value="c">
  <label for="q1c">JavaScript</label><br>
  <input type="button" value="Ответить">
</form>
</div>