'unselected elements also getting highlighted why? [closed]
If I click the correct answer that correct answer only should be change to green . But in my code if I click the correct answer all the answers are getting green color. my class set_correct is applied to the all the answers
<div class="container">
<div class="button_port">
<input type="button" id="btnid" class="pevcls" value="Previous Question" onclick="Prevfn()">
<input type="button" id="btnidnt" class="nextcls" value="Next Question" onclick="Nextfn()">
</div>
<div class="content_box">
<div id="question">
</div>
<div id="answer_button">
</div>
</div>
</div>
var i=1;
var questionpos=document.querySelector(".content_box");
var getquestion=document.getElementById("question");
var answersbutton=document.getElementById("answer_button");
function Prevfn()
{
if(i==1)
{
document.getElementById("btnid").disabled=true;
alert("Dont have the previous one");
document.getElementById("btnidnt").disabled=false;
}
else{
i--;
setquestion();
}
}
function Nextfn()
{
if(i==5)
{
var ind=document.getElementById("btnidnt").disabled=true;
document.getElementById("btnid").disabled=false;
}
else{
i++;
setquestion();
}
}
var allAnswerButtons = [];
function setquestion(question)
{
var questionsvari=questions[i].question;
getquestion.innerHTML=questions[i].question;
allAnswerButtons.forEach(abutton => abutton.remove());
allAnswerButtons = [];
questions[i].Answers.forEach(answer=>
{
const button=document.createElement("button");
button.classList.add('Ans_btn');
button.innerText=answer.text;;
if(answer.correct)
{
button.dataset.correct=answer.correct;
}
button.addEventListener('click', selectanswer);
answersbutton.appendChild(button);
allAnswerButtons.push(button)
}
)
}
function selectanswer(e)
{
var sal_answer=e.target;
var tof_value=sal_answer.dataset.correct;
Array.from(answersbutton.children).forEach(function(button)
{
setStatusClass(button,tof_value);
}
)
}
function setStatusClass(element,correct)
{
console.log(element);
if(correct)
{
alert(correct);
clearstatusclass(element);
element.classList.add('set_correct');
}
else
{
element.classList.add('set_false');
}
}
function clearstatusclass(element)
{
element.classList.remove('set_correct');
element.classList.remove('set_false');
}
const questions=[
{
question:"How many factors do a prime number have?",
Answers:[{text:'1 and the number itself',correct:'true'},{text:'2 and the 4',correct:'false'},{text:'3 and 6',correct:'false'},{text:'4 and 8',correct:'false'}]
},
{
question:"What type of term 2x+7y is?",
Answers:[{text:'234',correct:'true'},{text:'Binomial',correct:'false'},{text:'132',correct:'false'},{text:'222',correct:'false'}]
},
{
question:"What is the percentage of 2:5?",
Answers:[{text:'JavaScript',correct:'false'},{text:'40%',correct:'true'},{text:'JavaSql',correct:'false'}]
},
{
question:"Which food contains lactobacillus?",
Answers:[{text:'Curd',correct:'true'},{text:'Jojeshe',correct:'false'},{text:'JavaSql',correct:'false'},{text:'JavaSql',correct:'false'}]
},
{
question:"What is the national game of Bangladesh?",
Answers:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
},
{
question:"What is the national game of Bangladesh?",
Answers:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
}
];
here is my Full code..
https://codepen.io/pavisaran/pen/wvgQaew
I don't know where I did my mistake..
Thanks in Advance
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|