javascript - JavaScript 测验问题，继续点击
问题描述
这是一个由菜鸟（我）制作的有效 JavaScript 练习测验。
问题？如您所见，您可以在选择答案后继续单击答案按钮。我怎样才能避免这种情况？我尝试使用 **onclick = null ** 但我无法将其设置回点击状态。
谢谢您的回答！！！！！ 这是测验
<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>
解决方案
您可以设置一个在单击答案时切换的标志。如果单击答案时已设置标志，则不要执行任何操作。前进到新幻灯片时，重置标志：
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>推荐阅读
- assembly - bios ISR 存储在哪里以及如何处理中断？
- python - 如何在 Django 中个性化 URL 路径？
- php - php.ini max_upload_filesize 和 post_max_size 似乎被忽略了，AJAX 响应返回文件太大错误
- python - 带有adv / adj的动词的python命名约定？
- java - Apache Ignite 2.7.5 删除缓存并释放内存
- bind - 在 UBI 容器映像上安装绑定？
- java - 是否可以在 JPA 中使用窗口函数？
- php - 应用模块时出错：magento 2.1.7 中的启用命令
- rust - 在 rust 中为 HashMap 获取两个可变引用
- sql - 计算 sum() 是否在范围之间