使用此代码创建一个简单的数学测验。我有为按钮的text和设置字符串值的按钮。我目前遇到的问题是，在评估按键的键值之后，让设置器正确地设置按钮的类值。
在我的setStatusClass里面。我用if来检查对象的键值是否正确。我使用调试器来查看是否检查了值。而且，他们是。但是，我知道这些块并没有在运行。
// This document, when the start button is clicked, shows questions, & starts the timer
var startButton = document.getElementById("start-btn");
var questionContainerEl = document.getElementById("question-container");
var startScreen = document.getElementById("start-screen");
var questionTitle = document.getElementById("question");
var choiceButtons = document.getElementById("choice-buttons");
//var buttonVal = 0;
var score = 0;
var shuffleQuestions, currentQindex;
var i = 0;
//Object Container to hold questions and answers
const questions = [{
question: "What is 2 + 2?",
answers: [
{text: "4", correct: "true"},
{text: "2", correct: "false"},
{text: "3", correct: "false"},
{text: "5", correct: "false"}
]
},
{
question: "What is 4*4?",
answers: [{text: '8', correct: "false"},
{text: '16',correct: "true"},
{text: '2', correct: "false"},
{text: '6', correct: "false"},
]
},
{
question: "Solve for x. y = 3x - 6",
answers: [{text: '6', correct: "false"},
{text: '3', correct: "false"},
{text: '2', correct: "true"},
{text: "idk", correct: "false"}]
}];
startButton.addEventListener('click',startGame);
//Start game function shows Question Cont. Shuffles Questions on an Arr.
function startGame() {
startScreen.classList.add('hide');
shuffleQuestions = questions.sort(() => Math.random() - .5);
currentQindex = 0;
questionContainerEl.classList.remove('hide');
setNextQuestion();
}
//Erases question and finds next one on Arr.
function setNextQuestion() {
resetState();
showQuestion(shuffleQuestions[currentQindex]);
}
//Shows question as well as answers.
function showQuestion(questions){
questionTitle.innerText = questions.question;
var ansLength = Object.keys(questions.answers).length;
var ans;
for(i = 0; i < ansLength; i++) {
//When the answer button is selected questions goes to next object element
ans = questions.answers[i];
var button = document.createElement("button");
button.innerText = ans.text;
button.classList.add('btn');
if(ans.correct === "true") {
button.correct = ans.correct;
}
button.addEventListener("click", selectAnswer);
choiceButtons.appendChild(button);
}
}
//removes buttons from choices.
function resetState() {
while(choiceButtons.firstChild) {
choiceButtons.removeChild(choiceButtons.firstChild);
}
}
function selectAnswer(e) {
//setStatusClass(document.body, isCorrect);
var ar = Array.from(choiceButtons.children);
for (buttons of ar) {
var selectedButton = e.target;
var isCorrect = selectedButton.dataset.correct;
setStatusClass(buttons, isCorrect);
}
}
function setStatusClass(element) {
clearStatusClass(element);
if (element.classList.correct == "true") {
element.classList.add("right");
}
if (element.classList.correct == "false") {
element.classList.add("incorrect");
}
}
function clearStatusClass(element){
element.classList.remove("right");
element.classList.remove("incorrect");
}*, *::before, *::after {
box-sizing: border-box;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: 500;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #b3d7ff;
}
.start-screen {
display:flex;
justify-content: center;
align-items: center;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2,auto);
}
.btn {
border: black;
background-color: #b3d7ff;
border-radius: 10px;
padding: 5px 10px;
color: white;
outline: dashed;
margin: 5px;
}
.btn.right {
background-color: lightgreen;
color:black
}
.btn.incorrect {
background-color: red;
color:black;
}
.btn:hover{
border-color: black;
}
.wrapper {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.scores {
float:left;
align-self: flex-start;
position: absolute;
}
.timer {
float:left;
align-self: flex-start;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.hide {
display: none;
}
#question {
width: 700px;
max-width: 80%;
padding: 5px;
border: 2px;
text-align: center;
margin-top: 5px;
margin-bottom: 2px;
margin-left: 75px;
margin-right: 75px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<title>The Quiz</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./Assets/css/style.css" type = "text/css" media= "screen">
</head>
<body>
<div class="scores"><a href="highscores.html">View Highscores</a></div>
<div class="timer">Time: <span id="time">0</span></div>
<div class="wrapper">
<div id="start-screen" class="start">
<h1>The Quiz</h1>
<p>
This quiz is on a timer. Please do your best to complete it before the timer runs out.
Keep in mind that wrong answers will penalize you.
</p>
<button id="start-btn" class = "start-btn btn?">Start the Quiz</button>
</div>
<div id= "question-container" class= "hide">
<div id="question">Question</div>
<div id="choice-buttons" class= "btn-grid">
<button class= "btn hover">Answer 1</button>
<button class= "btn hover">Answer 2</button>
<button class= "btn hover">Answer 3</button>
<button class= "btn hover">Answer 4</button>
</div>
</div>
<div id="final-screen" class= "hide">
<h2>You're finished</h2>
<p>Your final score is<span id="final-score"></span>.</p>
<p>
Enter intials: <input type="text" id="initals" max="3" />
<button id="submit">Submit</button>
</p>
</div>
</div>
<script defer src="./Assets/js/logic.js"></script>
<script defer src="./Assets/js/questions.js"></script>
</body>
</html>
答案 0 :(得分：0)
判断类是否在元素的类列表中的方法是使用.includes()方法。
function setStatusClass(element) {
clearStatusClass(element);
if (element.classList.includes("correct")) {
element.classList.add("right");
} else {
element.classList.add("incorrect");
}
}