javascript - 如何在 JavaScript 测验中更改正确答案的颜色
问题描述
我正在做一个 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);
}
重复 3 次 4 opt2、opt3 和 opt 4
解决方案
希望这个样本对您有所帮助。
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";
}