JavaScript测验问题，继续点击

Question

这是一个由noob(我(制作的JavaScript练习测验。

问题是什么？正如你所看到的测验，你可以在选择答案后继续点击答案按钮。我该如何避免这种情况？？我尝试使用**onclick=null**，但无法将其设置回点击状态。

谢谢你的回答！！！！！这是QUIZ

<script>
let answers = [{
question: "01 What year is it",
a: "1850",
b: "1920",
c: "*2020",
d: "1995",
correct: "c"
}, {
question: "02 What color is the Sun?",
a: "*Yellow",
b: "Red",
c: "Green",
d: "Purple",
correct: "a"
}, {
question: "03 How do you say 'Hello' in French?",
a: "I don't know",
b: "Hi?",
c: "Paris?",
d: "*Bonjour",
correct: "d"
}, {
question: "What was the color of Napoleon's white horse?",
a: "*White",
b: "Grey",
c: "DarkBlue",
d: "Rainbow",
correct: "a"
}];
var slideIndex = 0;
var scoring = 0;
var q = document.getElementById("questionheader");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");

showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex = slideIndex + n);
}
function showSlides(n) {
a.classList.remove("green");
b.classList.remove("green");
c.classList.remove("green");
d.classList.remove("green");
a.classList.remove("red");
b.classList.remove("red");
c.classList.remove("red");
d.classList.remove("red");
a.classList.remove("borderGreen");
b.classList.remove("borderGreen");
c.classList.remove("borderGreen");
d.classList.remove("borderGreen");
document.getElementById("Goodjob").classList.remove("show")

if (n > 3) {
slideIndex = 3
}
if (n < 1) {
slideIndex = 0
}
q.innerHTML = answers[slideIndex].question;
a.innerHTML = answers[slideIndex].a;
b.innerHTML = answers[slideIndex].b;
c.innerHTML = answers[slideIndex].c;
d.innerHTML = answers[slideIndex].d;
}

function checkAnswers(choice) {
for (i = 0; i < answers.length; i++) {
let right = answers[i].correct
if (choice !== right && slideIndex == i) {
document.getElementById(choice).classList.add("red")
document.getElementById(right).classList.add("borderGreen")
} else if (choice === right && slideIndex == i) {
document.getElementById(right).classList.add("green")
document.getElementById("Goodjob").classList.add("show")
}
}
}
</script>

Answer 1

您可以设置一个在单击答案时切换的标志。如果在单击答案时已经设置了标志，请不要执行任何操作。前进到新幻灯片时，重置标志：

function plusSlides(n) {
slideAnswered = false;
showSlides(slideIndex = slideIndex + n);
}
// ...
let slideAnswered = false;
function checkAnswers(choice) {
if (slideAnswered) return;
slideAnswered = true;
// check answers for this slide...

let answers = [{
question: "01 What year is it",
a: "1850",
b: "1920",
c: "*2020",
d: "1995",
correct: "c"
}, {
question: "02 What color is the Sun?",
a: "*Yellow",
b: "Red",
c: "Green",
d: "Purple",
correct: "a"
}, {
question: "03 How do you say 'Hello' in French?",
a: "I don't know",
b: "Hi?",
c: "Paris?",
d: "*Bonjour",
correct: "d"
}, {
question: "What was the color of Napoleon's white horse?",
a: "*White",
b: "Grey",
c: "DarkBlue",
d: "Rainbow",
correct: "a"
}];
var slideIndex = 0;
var scoring = 0;
var q = document.getElementById("questionheader");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");
showSlides(slideIndex);
function plusSlides(n) {
slideAnswered = false;
showSlides(slideIndex = slideIndex + n);
}
function showSlides(n) {
a.classList.remove("green");
b.classList.remove("green");
c.classList.remove("green");
d.classList.remove("green");
a.classList.remove("red");
b.classList.remove("red");
c.classList.remove("red");
d.classList.remove("red");
a.classList.remove("borderGreen");
b.classList.remove("borderGreen");
c.classList.remove("borderGreen");
d.classList.remove("borderGreen");
document.getElementById("Goodjob").classList.remove("show")
if (n > 3) {
slideIndex = 3
}
if (n < 1) {
slideIndex = 0
}
q.innerHTML = answers[slideIndex].question;
a.innerHTML = answers[slideIndex].a;
b.innerHTML = answers[slideIndex].b;
c.innerHTML = answers[slideIndex].c;
d.innerHTML = answers[slideIndex].d;
}
let slideAnswered = false;
function checkAnswers(choice) {
if (slideAnswered) return;
slideAnswered = true;
for (i = 0; i < answers.length; i++) {
let right = answers[i].correct
if (choice !== right && slideIndex == i) {
document.getElementById(choice).classList.add("red")
document.getElementById(right).classList.add("borderGreen")
} else if (choice === right && slideIndex == i) {
document.getElementById(right).classList.add("green")
document.getElementById("Goodjob").classList.add("show")
}
}
}

* {
box-sizing: border-box
}
.container {
width: 800px;
height: 400px;
margin: 0 auto;
}
.main {
position: relative;
width: 600px;
height: 300px;
border: gray 2px solid;
text-align: center;
}
.content {
padding: 20px;
}
.answers {
margin: 0 auto;
width: 100px;
height: 30px;
border: 1px black solid;
margin-bottom: 5px;
cursor: pointer;
}
.borderGreen {
border: 2px solid green;
}
.green {
background-color: green;
}
.red {
background-color: rgb(248, 62, 62);
}
.Goodjob {
display: none;
width: 596px;
height: 40px;
position: absolute;
bottom: 0;
background-color: rgb(252, 199, 225);
transition-duration: 1000ms;
transition: ease;
}
.show {
display: block;
}

<div class="container">
<div class="main">
<div class="content">
<p id="questionheader"> </p>
<div id="a" class="answers" onclick="checkAnswers('a')"></div>
<div id="b" class="answers" onclick="checkAnswers('b')"></div>
<div id="c" class="answers" onclick="checkAnswers('c')"></div>
<div id="d" class="answers" onclick="checkAnswers('d')"></div>
</div>
<div id="Goodjob" class="Goodjob">Good Job!</div>
</div>
<div>
<button onclick="plusSlides(1)">next</button>
</div>
</div>

另一方面，最好避免内联处理程序，因为它们有太多的问题，不值得在现代Javascript中使用。考虑使用Javascript正确附加事件侦听器：

for (const answer of document.querySelectorAll('.answers')) {
answer.addEventListener('click', () => checkAnswers(answer.id));
}
document.querySelector('button').addEventListener('click', () => plusSlides(1));

let answers = [{
question: "01 What year is it",
a: "1850",
b: "1920",
c: "*2020",
d: "1995",
correct: "c"
}, {
question: "02 What color is the Sun?",
a: "*Yellow",
b: "Red",
c: "Green",
d: "Purple",
correct: "a"
}, {
question: "03 How do you say 'Hello' in French?",
a: "I don't know",
b: "Hi?",
c: "Paris?",
d: "*Bonjour",
correct: "d"
}, {
question: "What was the color of Napoleon's white horse?",
a: "*White",
b: "Grey",
c: "DarkBlue",
d: "Rainbow",
correct: "a"
}];
var slideIndex = 0;
var scoring = 0;
var q = document.getElementById("questionheader");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");
showSlides(slideIndex);
function plusSlides(n) {
slideAnswered = false;
showSlides(slideIndex = slideIndex + n);
}
function showSlides(n) {
a.classList.remove("green");
b.classList.remove("green");
c.classList.remove("green");
d.classList.remove("green");
a.classList.remove("red");
b.classList.remove("red");
c.classList.remove("red");
d.classList.remove("red");
a.classList.remove("borderGreen");
b.classList.remove("borderGreen");
c.classList.remove("borderGreen");
d.classList.remove("borderGreen");
document.getElementById("Goodjob").classList.remove("show")
if (n > 3) {
slideIndex = 3
}
if (n < 1) {
slideIndex = 0
}
q.innerHTML = answers[slideIndex].question;
a.innerHTML = answers[slideIndex].a;
b.innerHTML = answers[slideIndex].b;
c.innerHTML = answers[slideIndex].c;
d.innerHTML = answers[slideIndex].d;
}
let slideAnswered = false;
function checkAnswers(choice) {
if (slideAnswered) return;
slideAnswered = true;
for (i = 0; i < answers.length; i++) {
let right = answers[i].correct
if (choice !== right && slideIndex == i) {
document.getElementById(choice).classList.add("red")
document.getElementById(right).classList.add("borderGreen")
} else if (choice === right && slideIndex == i) {
document.getElementById(right).classList.add("green")
document.getElementById("Goodjob").classList.add("show")
}
}
}
for (const answer of document.querySelectorAll('.answers')) {
answer.addEventListener('click', () => checkAnswers(answer.id));
}
document.querySelector('button').addEventListener('click', () => plusSlides(1));

* {
box-sizing: border-box
}
.container {
width: 800px;
height: 400px;
margin: 0 auto;
}
.main {
position: relative;
width: 600px;
height: 300px;
border: gray 2px solid;
text-align: center;
}
.content {
padding: 20px;
}
.answers {
margin: 0 auto;
width: 100px;
height: 30px;
border: 1px black solid;
margin-bottom: 5px;
cursor: pointer;
}
.borderGreen {
border: 2px solid green;
}
.green {
background-color: green;
}
.red {
background-color: rgb(248, 62, 62);
}
.Goodjob {
display: none;
width: 596px;
height: 40px;
position: absolute;
bottom: 0;
background-color: rgb(252, 199, 225);
transition-duration: 1000ms;
transition: ease;
}
.show {
display: block;
}

<div class="container">
<div class="main">
<div class="content">
<p id="questionheader"> </p>
<div id="a" class="answers"></div>
<div id="b" class="answers"></div>
<div id="c" class="answers"></div>
<div id="d" class="answers"></div>
</div>
<div id="Goodjob" class="Goodjob">Good Job!</div>
</div>
<div>
<button>next</button>
</div>
</div>