Как изменить цвет правильного ответа на викторине JavaScript

Question

Я делаю викторину по javascript: множественный выбор с четырьмя опциями. Когда ответ правильный, я хочу, чтобы он стал зеленым, прежде чем перейти к следующему вопросу, если он неправильный, я хочу, чтобы он стал красным, а правильный ответ вспыхнул зеленым цветом

Поправки, которые я пробовал, перенесли цвет вСледующий вопрос. Любые предложения?

var currentQuestion =0;
var score = 0;
var totQuestions = questions.length;

var container = document.getElementById('quizContainer');
var questionEl = document.getElementById('question');
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');
var nextButton = document.getElementById('nextButton');
var resultCont = document.getElementById('result');

function loadQuestion(questionIndex) {
var q = questions[questionIndex];
questionEl.textContent = (questionIndex +1)+ '.' + q.question;
opt1.textContent = q.option1;
opt2.textContent = q.option2;
opt3.textContent = q.option3;
opt4.textContent = q.option4;};


document.getElementById('opt1').onclick = function   loadNextQuestion    (){
var selectedOption = document.getElementById('opt1');

var answer = 1;
if(questions[currentQuestion].answer == answer){
score +=1;
}
selectedOption.clicked = false;
currentQuestion++;
if(currentQuestion == totQuestions - 1) {
nextButton.textContent = 'Finish';
 }
if (currentQuestion == totQuestions) {
container.style.display ='none';
resultCont.style.display = '';
resultCont.textContent = 'You scored ' + score;
return;
}
loadQuestion(currentQuestion);
}

Повторяется три раза четыре opt2, opt3 и opt 4

Answer 1

Надеюсь, этот образец поможет вам.

HTML:

<div id="item" > I am just a div</div>
    <button id="yes">yes</button>
    <button id="no">no</button>

CSS:

    #item{
    width: 500px;
    height: 30px;
    background-color: red;
}

JS:

var item = document.getElementById("item");
var yes = document.getElementById("yes");
var no = document.getElementById("no");

yes.onclick = function(){
    item.style.backgroundColor = "red";
}

no.onclick = function(){
    item.style.backgroundColor = "green";
}

Answer 2

Это решается с помощью CSS. Вы можете применять классы к выбранным элементам, как того требует состояние. Я не уверен, какой элемент в вашем коде представляет «правильный» ответ, но вы получите ссылку на него и добавите или удалите класс по мере необходимости. Пример:

document.querySelector('.myCorrectAnswerElement').classList.add('greenSuccessClass');