Как изменить цвет правильного ответа с помощью JavaScript при нажатии кнопки «Проверить ответ»

Question

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span class="correct">(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span class="correct">(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br>
  <span class="correct">(D) Lorem ipsum dolor</span></p>
<button class="ans-button">check answer</button>

как изменить цвет правильной опции при нажатии кнопки «проверить ответ» на вопрос?

Answer 1

Удалите жестко закодированный класс correct на каждом элементе span и определите класс в css, затем при нажатии кнопки найдите соответствующий элемент span (ответ) и добавьте класс к элементу:

[...document.getElementsByClassName('ans-button')].forEach(button => button.addEventListener('click', highlightAnswer));

function highlightAnswer() {
    const answer = event.target.previousElementSibling.querySelector('span');
    answer.classList.add('correct');
}

.correct {
  background-color: green;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span>(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor
</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span>(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor
</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br><span>(D) Lorem ipsum dolor</span>
</p>
<button class="ans-button">check answer</button>

Answer 2

Используя JQuery, это довольно просто:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span class="correct">(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span class="correct">(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br>
  <span class="correct">(D) Lorem ipsum dolor</span></p>
<button class="ans-button">check answer</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  var a = $(".ans-button").on("click", function() {
    $(this).prev().find(".correct").css("color", "green");
  });
</script>

Answer 3

Вы можете использовать IF ELSE здесь, если ответ правильный, вы делаете .class в css, придавая ему цвет, если ответ правильный, CSS применяется, если нет, он переходит к другому, который можно оставить пусто, ничего не применяя, или вы можете предупредить, если хотите в качестве бонуса сказать, что это неправильно, или придать ему другой цвет