Javascript &引用;设置“U正确”;类应用于所有元素。为什么?

Javascript &引用;设置“U正确”;类应用于所有元素。为什么?,javascript,html,css,Javascript,Html,Css,我正在尝试创建我的javascript测试页面。我面临的问题是,set\u正确的类应用于所有元素。但我想这门课应该只适用于正确答案。“设置错误”类也应适用于错误答案。请看我的密码 <div class="container"> <div class="button_port"> <input type="button" id="btnid" class="pevcls&quo

我正在尝试创建我的javascript测试页面。我面临的问题是,set\u正确的类应用于所有元素。但我想这门课应该只适用于正确答案。“设置错误”类也应适用于错误答案。请看我的密码

<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;
        alert("Dont have next content");
        
    }
    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=="true")
        {
        
        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'}]
}
];

var i=1;
var questionpos=document.querySelector(“.content_框”);
var getquestion=document.getElementById(“问题”);
var answersbutton=document.getElementById(“应答按钮”);
函数Prevfn()
{
如果(i==1)
{
document.getElementById(“btnid”).disabled=true;
警惕(“没有上一个”);
document.getElementById(“btnidnt”).disabled=false;
}
否则{
我--;
设置问题();
}
}
函数Nextfn()
{
如果(i==5)
{
var ind=document.getElementById(“btnidnt”).disabled=true;
document.getElementById(“btnid”).disabled=false;
警告(“没有下一个内容”);
}
否则{
i++;
设置问题();
}
}
var allAnswerButtons=[];
函数集问题(问题)
{
var questionsvari=问题[i]。问题;
getquestion.innerHTML=questions[i].question;
allAnswerButtons.forEach(abutton=>abutton.remove());
allAnswerButtons=[];
问题[i].答案.forEach(答案=>
{
const button=document.createElement(“按钮”);
button.classList.add('Ans_btn');
button.innerText=answer.text;;
如果(回答正确)
{
button.dataset.correct=answer.correct;
}
按钮。addEventListener('click',selectanswer);
应答按钮。追加子项(按钮);
所有按钮。按下(按钮)
}
)
}
功能选择应答(e)
{
var sal_answer=e.target;
var tof_value=sal_answer.dataset.correct;
数组.from(answersbutton.children).forEach(函数(按钮)
{
setStatusClass(按钮、豆腐值);
}
)
}
功能设置StatusClass(元件,正确)
{
控制台日志(元素);
如果(正确==“正确”)
{
类(元素);
element.classList.add('set_correct');
}
其他的
{
element.classList.add('set_false');
}
}
函数clearstatusclass(元素)
{
element.classList.remove('set_correct');
element.classList.remove('set_false');
}
常量问题=[
{
问题:“质数有多少个因子?”,
答案:[{文本:'1和数字本身',正确:'true'},{文本:'2和4',正确:'false'},{文本:'3和6',正确:'false'},{文本:'4和8',正确:'false'}]
},
{
问题:“2x+7y是什么类型的术语?”,
答案:[{text:'234',correct:'true'},{text:'Binomial',correct:'false'},{text:'132',correct:'false'},{text:'222',correct:'false'}]
},
{
问题:“2:5的百分比是多少?”,
答案:[{text:'JavaScript',correct:'false'},{text:'40%',correct:'true'},{text:'JavaSql',correct:'false'}]
},
{
问题:“哪些食品含有乳酸杆菌?”,
答案:[{text:'Curd',correct:'true'},{text:'Jojeshe',correct:'false'},{text:'JavaSql',correct:'false'},{text:'JavaSql',correct:'false'}]
},
{
问题:“孟加拉国的国家运动会是什么?”,
答案:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
},
{
问题:“孟加拉国的国家运动会是什么?”,
答案:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
}
];
我的完整代码如下


任何人请告诉我我的错误在哪里

当你点击答案时,你会浏览所有选项(按钮),而不是设置一个

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);
        
    }
    )
}
更改
按钮。添加EventListener('单击',选择Answer)
设置问题
按钮。添加EventListener('单击',(e)=>选择回答(e,按钮))

和修复选择答案

function selectanswer(e, button)
{
    var sal_answer=e.target;
    var tof_value=sal_answer.dataset.correct;
             
    setStatusClass(button,tof_value);
}